How to build a Woocommerce shop page in WordPress with Oxygen Builder

In this first part video, we’ll be covering:

• Using the Oxygen repeater element to build custom product cards for shop archive.
• Custom add to cart button in repeater
• Display discount percent in repeater
• Display sale badge in repeater
• Quick view – product filters
• Product sorting
• How to style element with no styling options

.custom-sales-badge {
	background: var(--tertiary-color);
	width: 100%;   
	padding: 2px 8px;
}

div#c_sales_badge h6 {
	color: white;
	font-size: 10px;
	text-align: center;
	letter-spacing: 0.5px;
}

.discount-percent {
	background: white;
	padding: 0 8px;
	width: 100%;
	text-align: center;
	font-size: 75%;
	font-weight: bold;
}


/*custom add to cart*/
p.product.woocommerce.add_to_cart_inline {
	border: none!important;
	padding: 0px!important;

}

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
	border-radius: 0px!important;
	background: var(--secondary-color);
	border: none!important;

}


.button.product_type_variable.add_to_cart_button, a.button.product_type_simple{

	border: none!important;    
	border-radius: 0px!important;

}
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, .button.product_type_variable.add_to_cart_button, a.button.product_type_simple {
	padding: 10px 20px;
	font-size: 10px

}


.add_to_cart_inline span.woocommerce-Price-amount.amount {
	display: none;
}

a.added_to_cart.wc-forward {
	display: none;
}


.addcart {
	transform: translateY(100%);
	transition: 400ms;
}

.product-card:hover .addcart {
	opacity: 1;
	transform: translateY(33%)
}


/*QUICK VIEW*/

a.woosq-btn {
	border: none;
	color: white;
	line-height: 1.2;
	font-size: 30px;
	padding: 8px;

}

.product-card:hover .quick-view {

	opacity:1;
	transform:translateY(0) rotate(180deg);

}

.quick-view {
	transition:400ms;
	opacity: 0;
	transform:translateY(50%) rotate(180deg);
	position: absolute;
	top: 0px;
	right: 0px;
	background: #33335c;
	width: 35px;
	height: 35px;


}

/*QUICK VIEW MODAL*/

.summary h1 {	
	font-size: 20px;
	border-bottom: solid 2px gray;
	padding-bottom: 16px!important;
}

.summary p {	
	font-size: 14px;
}


#woosq-popup .thumbnails .slick-arrow {
	color: #717171;
	background-color: #9d9d9d4d;
	border-radius: 5px;   
	border: none;
}


/*OUT OF STOCK*/

div#c_out_stock_badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	background: rgb(255 255 255 / 80%);
	width: 100%;
	height: 100%;
	padding: 10px 16px;
}



div#c_out_stock_badge h6 {
	font-size: 12px;
	text-align:center
}

@media all and (max-width:1025px){


	.product-card .addcart {

		position:static!important;
		transform: translateY(0);

	}


	.quick-view {
		opacity: 1;
		transform: translateY(0) rotate(180deg);

	}
}




@media all and (max-width:481px){


	.product-info .addcart {

		position:static!important;
		transform: translateY(0);

	}


	.quick-view {
		opacity: 1;
		transform: translateY(0) rotate(180deg);
		top: auto!important;
		bottom: 12px;
		left: 8px;
	}
	
	p.product.woocommerce.add_to_cart_inline {
	margin-bottom: 0;
	
}
}

//-------------ADD TO CART -----------------

<?php
	
global $product;
if (!isset($product) || !$product) {return;}


$StockQ=$product->get_stock_quantity();

 if ($StockQ>=0 && $product->is_in_stock() ){
echo do_shortcode('[add_to_cart id="'. $product->get_id() . '"]');
 }

?>

//----------------SALES BADGE -------------

<?php

global $product;
if (!isset($product) || !$product) {return;}

if ( $product->is_on_sale() )  { 

?> <div id="c_sales_badge" class="custom-sales-badge" ><h6 >SALE!</h6></div> <?php
							   
	 } 


?>



//-----------DISCOUNT PERCENT  (activate relevant code snippet for this to work) ----------------

<?php
	echo show_sale_percentage_loop()
?>



//-------------- QUICK VIEW ----------------

<?php
	
global $product;
if (!isset($product) || !$product) {return;}

$pId = $product->get_id(); 

echo do_shortcode('[woosq id="'. $pId . '"]');

?>



//------------- OUT OF STOCK --------------

<?php
	global $product;
if (!isset($product) || !$product) {return;}

$StockQ=$product->get_stock_quantity();

    if ($StockQ<1 && ! $product->is_in_stock() ){
    echo '<div id="c_out_stock_badge" class="custom-out-of-stock-badge" ><h6 >OUT OF STOCK</h6></div>';
	}


?>