Skip to main content
Go to home page
Skip to video
Skip to article

How to build a Woocommerce single product page in WordPress with Oxygen Builder

Last Updated: November 20, 2022 Categories:
Oxygen, Woocommerce
811 views

In this second part tutorial, we’ll build a single product template. We’ll be covering:

  • Bespoke single product template design
  • Product Image gallery carousel
  • Quick buy button
  • Deal countdown timer
  • Live sales popups
  • Sold quantity
  • Related products
  • Recently viewed products
  • Display Upsells in single product page
  • Enhanced Reviews tab
  • Questions and Answers tab
  • How to selectively disable default product tabs
  • How to style element with no styling options etc.
/*RECENTLY VIEWED ON ARCHIVE */

.recently-viewed-archive span.product-title {
      width: 100%;
    overflow: hidden;
    display: inline-block;
    font-size:12px
}

.recently-viewed-archive ul.product_list_widget {
	display: flex;
	gap: 10px;
	flex-wrap:wrap;
	justify-content: center;
}

.recently-viewed-archive .woocommerce ul.product_list_widget li {
	padding: 8px;
	border:none;
	display: fLex;
	flex-direction: column;
	border-radius: 5px;
	box-shadow: 0 0 7px -3px 00000047;
	background: white;
}

.recently-viewed-archive ul.product_list_widget a {
	max-width:200px;
	font-size:12px;
	flex-grow: 1;
}

.recently-viewed-archive .woocommerce ul.product_list_widget li img {

	width: 100%;
	object-fit: cover;
	border:none
}

.recently-viewed-archive .woocommerce-Price-amount {

	font-size:12px;

}


/*SINGLE PRODUCT GALLERY SLIDER*/
ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 100;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
	visibility:visible;
	content: '\2771';	
	margin-right: 10px;
	font-size: 40px;   
	font-weight: bold;
}
a.flex-prev::before {
    visibility:visible;
    content: '\2770';	   
	margin-left: 10px;
	font-size: 40px;
	font-weight: bold;
}
ul.flex-direction-nav li a {
	color: #ccc;
}
ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

.flex-control-nav::-webkit-scrollbar-track
{
	
	
	background-color: #e2e2e2;
}

.flex-control-nav::-webkit-scrollbar
{
	
	background-color: #F5F5F5;
}

.flex-control-nav::-webkit-scrollbar-thumb
{
	
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/*woocommerce button*/
.woocommerce ul.products li.product .button {
  
    padding: 10px 20px;
    background: var(--secondary-color);
}
.woocommerce ul.products li.product .button:hover {
  
  
    background: var(--primary-color);
}



/*SHORTEN PRODUCT NAME */

.woocommerce-loop-product__title {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 4.25em;
	margin-bottom: 8px!important;
}



/*QUIKC BUY BUTTON*/

.quick-buy.single_add_to_cart_button.button
{background: var(--secondary-color)!important}

.quick-buy.single_add_to_cart_button.button:hover
{background: var(--primary-color)!important}


/*SINGLE PRODCUT SALE BADGE*/
.woocommerce ul.products li.product .onsale, .woocommerce span.onsale {
   
	font-size: 10px;
	border-radius: 0;   
	top: 5px;
	left: 5px;   
	text-transform: uppercase;
	letter-spacing: 1px;
}


/*REMOVE MARGIN BOTTOM FROM PRODUCT IMAGES*/
.woocommerce ul.products li.product a img {
   
	margin: 0;}


/*WIDGET TITLES*/

.ct-widget .widget.woocommerce .widgettitle {
    font-size: 16px;
   
}

/*RELATED PRODUCTS ON SINGLE PRODUCT PAGE*/
.related.products li.product{
	border: solid 1px #f0f0f0;
	margin:0!important;
	padding:min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem)!important;

}

.related.products ul.products {
	margin: 0;
}
.related.products .woocommerce-loop-product__title, .upsells.products .woocommerce-loop-product__title {
	text-overflow: ellipsis;
	overflow: hidden;
}


/* PRODUCT TABS CONTAINER IN SINGLE PRODUCT PAGE*/
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs, .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs {
    display: flex;
}

.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li, .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li {
  
    margin: 0;
    
}



/* TABS */
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li a {
  
    padding: 12px 12px;
   
}


/*REVIEW TAB ON SINGLE PRODUCT PAGE*/

.woocommerce .oxy-product-tabs .star-rating span, .woocommerce .oxy-product-tabs .star-rating::before {
    color: rgb(255 119 0 / 89%);
}

#reviews .cr-summaryBox-wrap, #cr_all_reviews_shortcode .cr-summaryBox-wrap, .ivole-reviews-grid .cr-summaryBox-wrap {
	flex-direction: column;

}


#reviews .cr-summaryBox-wrap .cr-overall-rating-wrap, #cr_all_reviews_shortcode .cr-summaryBox-wrap .cr-overall-rating-wrap, .ivole-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap, #reviews .cr-summaryBox-wrap .ivole-summaryBox, #reviews .cr-summaryBox-wrap .cr-overall-rating-wrap, #cr_all_reviews_shortcode .cr-summaryBox-wrap .ivole-summaryBox, #cr_all_reviews_shortcode .cr-summaryBox-wrap .cr-overall-rating-wrap, .ivole-reviews-grid .cr-summaryBox-wrap .ivole-summaryBox, .ivole-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap {

	width: auto; border:none;
}



.woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text, div.cr-all-reviews-shortcode ol.commentlist li .comment-text {

	margin: 0;
}

.woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text{
    border: solid 1px var(--border-color);
    border-radius: 5px;
	
	}


.woocommerce-cart table.cart td.actions .coupon .input-text, .select2-container--default .select2-search--dropdown .select2-search__field, .woocommerce textarea, .select2-dropdown, .woocommerce .select2-selection, .woocommerce input[type="search"], .woocommerce input[type="text"], .woocommerce input[type="number"], .woocommerce input[type="tel"], .woocommerce input[type="email"], .woocommerce input[type="password"], .woocommerce select {
   
    max-width: 100%;
}


/*Q&A TAB IN SINGLE PRODUCT PAGE */

#tab-title-reviews {
	width: 50%;
}

#tab-title-cr_qna {
	width: 50%;
}


#cr_qna.cr-qna-block div.cr-qna-search-block {
    display: flex;   
   flex-direction: column;
    gap: 10px;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-search div, #cr_qna.cr-qna-block div.cr-qna-search-block div {
    
    font-size: 14px;
}


#cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-q .cr-qna-list-q-q-r .cr-qna-list-question, #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-a .cr-qna-list-q-a-r .cr-qna-list-answer-s {
    font-size: 16px;
   
}

#cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-q .cr-qna-list-q-q-r .cr-qna-list-q-author, #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-a .cr-qna-list-q-a-r .cr-qna-list-q-author {
    font-size: 10px;
  
    margin-top: 5px;
  
}

#cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-b .cr-qna-list-q-b-r {
   
    width: 100%;
    display: flex;
     flex-direction: column;
    gap: 9px;
}

#cr_qna.cr-qna-block div.cr-qna-search-block button.cr-qna-ask-button {
    font-size: 16px;
   
    background: #33335c;
    
    border-radius: 5px;
   
  
     margin: 0;
    padding: 5px 15px;
}


#cr_qna.cr-qna-block div.cr-qna-list-block .cr-qna-list-q-cont button.cr-qna-ans-button {
    font-size: 14px;
   
    border: 1.5px solid #ff861c;
    border-radius: 5px;
   
    color: #ff861c;
       width: 100%;
}



/*REMOVE AVATAR FROM REVIEW*/
.woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li img.avatar, div.cr-all-reviews-shortcode ol li.comment div.comment_container img.avatar, div.cr-all-reviews-shortcode ol li.review div.comment_container img.avatar {

	display: none;
}


#cr_all_reviews_shortcode ol.commentlist {
	padding: 0 1em;

}


div.cr-all-reviews-shortcode ol li.comment, div.cr-all-reviews-shortcode ol li.review {

	margin-bottom: 1em;

}



/*REVIEW BARS*/

.ivole-meter {

	background: none;
	background-color: #ddd;
	height: 10px;
	box-shadow: none;

}

.ivole-meter .ivole-meter-bar {

	background: none;
	background-color: #ffa034;
	box-shadow: none;

}



/*SWATCHES FOR ATTRIBUTES AND VARIATIONS*/

li.variable-item.button-variable-item.selected {
    border: solid 1px #1c6df4;
    box-shadow: 0 0 7px 2px #1c6df4!important;
}



/*PRODUCT PRICE ON SINGLE PRODUCT*/
.product-info p.price {
    display: flex;
    gap: 10px;
}

/*RECENTLY VIEWED ON SINGLE PRODUCT */



.recently-viewed-single h2.widgettitle, .recently-viewed-single .woocommerce-Price-amount {
	font-size: 12px!important;
}


.recently-viewed-single .woocommerce ul.product_list_widget li img {

	width: auto;
	max-width: 6em;
	border:none;
	margin-bottom: 4px;
    margin-right: 4px;
    margin-top: 4px;

}

.recently-viewed-single .product_list_widget a {
	font-size: 10px;
	line-height: 1.3
}



/*ADDED TO CART MESSAGE*/
.woocommerce-info, .woocommerce-error, .woocommerce-message {
    
    background: #fff6da;
    padding: 4px 20px 4px 50px;
    font-size: 12px;
}

.woocommerce-message .button.wc-forward {
    background: #2d4ddb;
    border: 1px solid #2d4ddb;
    font-size: 10px;
    border-radius: 0px;
    padding: 6px 14px;
    border-radius: 0;
    
}


.woocommerce-message .button.wc-forward:hover {
    background: #2d4ddb;
   
    
}


.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
    
    top: 0.4em;
   
}


@media all and (max-width:800px){
	
	#tab-title-reviews {
	width: 100%;
}

#tab-title-cr_qna {
	width: 100%;
}
	
	
}
//-------------QUANTITY IN CART (activate relevant snippet for this to work) -------------------

<?php
	
global $product;

  
$product_id = $product->get_id();
   $in_cart = false;
  
   foreach( WC()->cart->get_cart() as $cart_item ) {
      $product_in_cart = $cart_item['product_id'];
      if ( $product_in_cart === $product_id ) $in_cart = true;
   }
  
   if ( $in_cart ) {
  
     echo do_shortcode('[product_qty id="'. $product_id . '"]');
  
   }

?>


//------------------BUY NOW BUTTON---------------------

<a href="<?php echo esc_url(home_url( '/' ));?>checkout/?add-to-cart=<?php the_ID();?>" class="quick-buy single_add_to_cart_button button alt" ><?php esc_html_e('Buy now', 'demo.local'); ?></a>
Download Code Snippets
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!
Join
Join our facebook community
5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Leave a Reply

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

I need help with
Join over  7000 Learners
Get fresh content from DwC
Subscribe to Design with Cracka YouTube channel
Join Design with Cracka Facebook group
Follow Cracka on Twitter
Follow Cracka on LinkedIn
Book a 1 hour consultaton
For expert opinions and advice on your next project, consult the professionals! We have the experience and expertise to help you succeed.
Paid Content
Advertise your content here
dicecartselectearthcrossarrow-rightlayerstext-align-center
0
Would love your thoughts, please comment.x
()
x