Skip to main content
Skip to video
Skip to article

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

Oxygen, Woocommerce
3,160 views

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>';
	}


?>


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
Join the Community
Join over 7000 learners and contributors on Design with Cracka community. Don't miss out on the conversations!
4 1 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
naveen
naveen
1 year ago

//———–DISCOUNT PERCENT (activate relevant code snippet for this to work) —————-
Where to download all code snipet?

Leave a Reply

Your email address will not be published. Required fields are marked *

dicecartselectearthcrossarrow-rightlayerstext-align-center
2
0
Would love your thoughts, please comment.x
()
x