Last active
May 13, 2020 16:59
-
-
Save agirlandhermac/49134987df3a03d8aab5b48b0bff2729 to your computer and use it in GitHub Desktop.
Use Divi builder on WooCommerce single product pages.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**************************************************/ | |
/*** MAIN CODE TO MAKE SINGLE PRODUCT FULLWIDTH ***/ | |
/**************************************************/ | |
.woocommerce .woocommerce-breadcrumb { | |
display: none; /* hides Woo breadcrumbs */ | |
} | |
.single-product .clearfix { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
.single-product .et_pb_section .clearfix, .single-product #main-footer .clearfix, .single-product .container.et_menu_container { | |
display: block; | |
} | |
.single-product #main-content .container { | |
overflow: hidden; | |
background: #f0f0f0; /* this color appears behind the default add to cart section */ | |
padding-top: 0 !important; | |
width: 100% !important; /* makes it a fullwidth page */ | |
max-width: 100% !important; | |
} | |
.single-product #main-content .et_pb_row, | |
.single-product #tab-description.woocommerce-Tabs-panel .et_pb_row, | |
.single-product #tab-description.woocommerce-Tabs-panel .et_pb_row.et_pb_row_fullwidth, | |
.single-product #tab-description.woocommerce-Tabs-panel .et_pb_specialty_fullwidth>.et_pb_row { | |
width: 100% !important; /* makes content in tabs fullwidth */ | |
max-width: 100% !important; | |
} | |
body.woocommerce.single-product #content-area div.product .woocommerce-tabs ul.tabs, | |
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs, | |
.single-product #tab-description.woocommerce-Tabs-panel h2 { | |
display: none; /* hide description tab and default description h2 since we're adding in manually */ | |
} | |
.single-product .et_pb_section h2 { | |
display: block !important; /* makes all builder h2s visible because we're hiding them above (it's not possible to be more specific above and :not() insn't an option since it only works with simple selectors */ | |
} | |
.woocommerce.single-product .woocommerce-tabs { | |
border: 0; | |
} | |
.single-product .woocommerce-tabs .panel { | |
padding: 0 !important; | |
} | |
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs:before { | |
border-bottom-color: transparent; | |
} | |
.single-product.woocommerce div.product { | |
display: flex; | |
flex-direction: column; | |
} | |
.single-product div.woocommerce-tabs.wc-tabs-wrapper { | |
order: -1; /* moves default tabs section to top */ | |
margin: 0; | |
} | |
/******************************************/ | |
/*** POST TITLE H1 / TOP FEATURED IMAGE ***/ | |
/******************************************/ | |
.single-product .et_pb_post_title.et_pb_featured_bg { | |
padding: 24% 8% 0 !important; | |
} | |
.woocommerce.single-product .et_pb_post_title.et_pb_featured_bg .et_pb_title_container { | |
padding: 0 !important; | |
text-align: center; | |
} | |
.single-product .et_pb_title_container h1 { | |
color: #f0f0f0 !important; | |
font-size: 3.3em !important; | |
padding: .5em .7em; | |
background: rgba(0,0,0,0.7); /* background color of h1 */ | |
display: inline-block; | |
} | |
@media only screen and (max-width: 767px) { | |
.single-product .et_pb_post_title.et_pb_featured_bg { | |
padding-top: 50% !important; | |
} | |
.single-product .et_pb_title_container h1 { | |
font-size: 2em !important; | |
} | |
} | |
@media only screen and (min-width: 768px) and (max-width: 1200px) { | |
.single-product .et_pb_title_container h1 { | |
font-size: 2.5em !important; | |
} | |
} | |
/************************************/ | |
/*** TESTIMONIAL / INFOBOX MODULE ***/ | |
/************************************/ | |
.woocommerce.single-product .et_pb_testimonial { | |
padding: 12% 10% 12% 0 !important; | |
display: flex; | |
flex-direction: row; | |
} | |
.woocommerce.single-product .et_pb_testimonial_meta { | |
font-size: 15px; | |
font-style: italic; | |
} | |
.woocommerce.single-product .et_pb_testimonial:before { | |
content: "\7b" !important; /* changes quotes to icon without the circle just cause I like it better lol, you can use ETs icon font library to change it to something else https://www.elegantthemes.com/blog/resources/elegant-icon-font */ | |
top: 5% !important; | |
left: 150px !important; | |
background: transparent !important; | |
font-size: 80px !important; | |
} | |
.woocommerce.single-product .et_pb_testimonial_portrait { | |
min-width: 150px !important; /* image width */ | |
min-height: 300px; /* image height */ | |
margin-left: -30px !important; | |
margin-right: 0 !important; | |
border-radius: 35px !important; /* rounded corners */ | |
} | |
.woocommerce.single-product .et_pb_testimonial_portrait:before { | |
border-radius: 35px !important; /* makes inner shadow match image */ | |
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.3); | |
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.3); | |
box-shadow: inset 0 0 8px rgba(0,0,0,.3); | |
} | |
.woocommerce.single-product .et_pb_testimonial_description { | |
margin-left: 2em !important; | |
} | |
@media only screen and (max-width: 480px) { | |
.woocommerce.single-product .et_pb_testimonial { | |
padding: 16% 10% 16% 0 !important; | |
} | |
.woocommerce.single-product .et_pb_testimonial:before { | |
top: 0 !important; | |
} | |
.woocommerce.single-product .et_pb_testimonial_description { | |
font-size: .9em; | |
} | |
} | |
/***********************/ | |
/*** GALLERY MODULES ***/ | |
/***********************/ | |
.woocommerce.single-product .et_pb_gallery_grid img { | |
min-width: 100%; | |
} | |
.single-product .et_pb_gallery .et_pb_gallery_items { | |
display: flex; /* images will stay on the same line on all screen sizes so I'd suggest max 5 per module, or remove this */ | |
flex-direction: row; /* flex column is set on the entire product so this is needed */ | |
} | |
.single-product .et_pb_gallery { | |
margin-bottom: 0 !important; | |
} | |
.single-product .et_pb_grid_item { | |
width: auto; | |
margin: 4px !important; /* this is the space around images that creates the gap */ | |
flex: 1; | |
-webkit-animation: none !important; | |
-moz-animation: none !important; | |
animation: none !important; | |
} | |
/******************/ | |
/*** TYPOGRAPHY ***/ | |
/******************/ | |
.single-product h2 { | |
padding-bottom: 0; | |
} | |
/*******************************/ | |
/*** CUSTOM COLORED DIVIDERS ***/ | |
/*******************************/ | |
.single-product hr { /* I'm just customizing the horizontal rule since they're easy to add in the editor, you can replace with pseudos or divider modules or whatever method you prefer */ | |
border-bottom-width: 0; | |
border-style: solid; | |
border-top-width: 8px; /* change this to make the accent line thicker */ | |
max-width: 60px; | |
border-color: #BC741C; /* custom divider color */ | |
margin-top: 15px; | |
margin-bottom: 15px; | |
} | |
.left-hr hr { | |
margin-left: 0; /* if you have left align text with a divider add this class, default is centered */ | |
} | |
.woocommerce.single-product .et_pb_testimonial_author:before { /* custom testimonial divider */ | |
content: ""; | |
position: absolute; | |
bottom: 20%; | |
left: -70px; | |
background: #BC741C; | |
width: 60px; /* divider width */ | |
height: 8px; /* divider thickness */ | |
} | |
/**********************************/ | |
/*** INTRO BOX UNDER POST TITLE ***/ | |
/**********************************/ | |
.intro-cta .add_to_cart_inline a.button { | |
display: none; /* I'm using a Woo shortcode to add the price dynamically but the button needs to be hidden as it will loop to current page */ | |
} | |
.intro-cta .add_to_cart_inline { /* price styling */ | |
padding: 0 !important; | |
margin-top: -15px; | |
border: 0 !important; | |
text-align: center; | |
font-size: 30px; | |
font-weight: 700; | |
} | |
@media only screen and (max-width: 980px) { | |
.intro-cta { | |
margin-left: 30px; | |
margin-right: 30px; | |
} | |
} | |
/************************************************************************/ | |
/*** DEFAULT SUMMARY BOX (FEATURED IMAGE / DESCRIPTION / ADD TO CART) ***/ | |
/************************************************************************/ | |
.woocommerce.single-product .entry-summary .entry-title { | |
display: none; /* hide default h1 because we're adding an h1 with the post title module */ | |
} | |
.woocommerce.single-product div.product div.images.woocommerce-product-gallery { | |
margin-top: 10%; | |
margin-bottom: 0; | |
} | |
.woocommerce.single-product div.product.sale div.images.woocommerce-product-gallery { | |
margin-top: 6%; | |
} | |
.single-product .entry-summary p.price { | |
margin-top: .5em; | |
margin-bottom: .5em; | |
} | |
.single-product .entry-summary p.price span { | |
font-size: 36px !important; | |
font-weight: 700; | |
} | |
.single-product .entry-summary .product_meta { | |
display: none; /* hide sku and category - optional */ | |
} | |
.woocommerce.single-product div.product form.cart .variations td select { | |
background: #fff; /* dropdown color */ | |
font-size: 18px; | |
font-weight: 500; | |
height: 33px; | |
} | |
.single-product .entry-summary { /* default description box */ | |
text-align: center; | |
padding: 3% 6% 6%; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
margin-bottom: 0; | |
} | |
.woocommerce.single-product div.product form.cart div.quantity { /* quantity box */ | |
width: 100px !important; | |
margin-right: 0 !important; | |
} | |
.woocommerce.single-product .quantity input.qty { /* quantity box */ | |
border-radius: 0; | |
border: 2px solid #222 !important; | |
/* height: 52px; add this and tweak if your quantity box is shorter than your button */ | |
color: #222 !important; | |
background: rgba(255,255,255,0.8) !important; | |
} | |
.woocommerce.single-product form.cart .button { /* default add to cart button */ | |
float: none !important; | |
font-size: 1.1em; | |
} | |
.woocommerce.single-product button.button.alt.disabled { | |
background: #999; /* replaces Woo purple when no selection has been made on variable products */ | |
} | |
.woocommerce.single-product div.product form.cart { | |
display: flex; | |
} | |
.woocommerce.single-product div.product form.variations_form.cart, .woocommerce.single-product div.product form.cart .variations tr { | |
display: flex; | |
flex-direction: column !important; | |
} | |
.woocommerce.single-product div.product form.cart .variations td { | |
font-size: 18px; | |
padding-right: 0 !important; | |
margin: auto; | |
} | |
.woocommerce.single-product div.product div.images .flex-control-thumbs { | |
margin-top: 2%; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li { /* these three change the gap between small default thumbnails */ | |
width: 23.5%; | |
margin-right: 2%; | |
margin-bottom: 2%; | |
} | |
.woocommerce.single-product .pswp__caption__center, .woocommerce.single-product .mfp-title { | |
display: none; /* hide titles of lightbox images - optional */ | |
} | |
.woocommerce.single-product div.product form.cart .variations { | |
margin-bottom: 0; | |
} | |
.woocommerce-variation-price { | |
height: 46px; | |
font-size: 24px; | |
} | |
.single-product #left-area { | |
padding-bottom: 0; | |
} | |
@media only screen and (max-width: 768px) { | |
.woocommerce.single-product div.product div.images.woocommerce-product-gallery { | |
margin-top: 10%; | |
} | |
.woocommerce.single-product div.product div.images.woocommerce-product-gallery { | |
padding-left: 6%; | |
padding-right: 6%; | |
box-shadow: none !important; | |
} | |
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__trigger { | |
right: 1.5em; /* nudge magnify icon for mobile and tablet */ | |
} | |
} | |
@media only screen and (min-width: 769px) and (max-width: 1200px) { | |
.woocommerce div.product div.images { | |
width: 60%; | |
} | |
.single-product .entry-summary { | |
width: 80% !important; | |
} | |
} | |
@media only screen and (min-width: 1281px) { | |
.woocommerce.single-product div.product div.images .flex-control-thumbs { | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 70%; | |
padding-bottom: 0 !important; | |
} | |
} | |
/**************************/ | |
/*** ERRORS AND NOTICES ***/ | |
/**************************/ | |
.single-product .woocommerce-error, .single-product .woocommerce-info, .single-product .woocommerce-message { | |
padding: 1em 2em !important; /* ex: banner at top after you add something to the cart */ | |
margin-bottom: 0; | |
} | |
/************************/ | |
/*** RELATED PRODUCTS ***/ | |
/************************/ | |
.single-product .related.products { | |
background: #fff; /* related section background color */ | |
width: 100%; /* make fullwidth */ | |
padding-top: 8%; | |
padding-bottom: 5%; | |
margin: 0 auto; | |
text-align: center; | |
} | |
.woocommerce.single-product .products ul, .woocommerce.single-product ul.products { | |
margin: 0 14% 1em; /* adds space around related items since the section is fullwidth */ | |
display: flex; | |
} | |
.woocommerce.single-product ul.products li.product .woocommerce-loop-product__title { /* related section heading */ | |
font-size: 27px !important; | |
text-align: center; | |
} | |
.single-product .related h2:after { /* add custom divider to related heading to match others */ | |
content: ""; | |
position: absolute; | |
margin-top: 55px; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
-ms-transform: translate(-50%, -50%); | |
-webkit-transform: translate(-50%, -50%); | |
background: #BC741C; | |
width: 60px; | |
height: 8px; | |
} | |
.single-product .related h2 { /* related products titles */ | |
font-size: 36px !important; | |
text-align: center; | |
text-transform: capitalize; /* it really bugs me that Products isn't capitalized lol - optional */ | |
margin-bottom: 50px; | |
} | |
.single-product .woocommerce-loop-product__title:after { | |
content: none !important; /* to not apply decorative line to related product h2, we can't use :not() here */ | |
} | |
.woocommerce ul.products li.product .star-rating { /* center stars if ratings are enabled */ | |
margin-left: auto !important; | |
margin-right: auto !important; | |
} | |
.woocommerce.single-product ul.products li.product .price, .woocommerce.single-product ul.products li.product .price del, .woocommerce.single-product ul.products li.product .price ins { | |
font-size: 22px; | |
font-weight: 500; | |
} | |
.woocommerce.single-product ul.products li.product .price { | |
color: #00adad !important; | |
} | |
.woocommerce.single-product ul.products li.product .price del { /* discounted price on sale items */ | |
color: #999 !important; | |
} | |
.single-product .related.products a.button { | |
font-size: .7em; /* make buttons smaller */ | |
} | |
@media only screen and (max-width: 767px) { | |
.woocommerce.single-product ul.products li.product:nth-child(3n) { | |
display: none; /* on small screens the third product drops below so it looks bad but making them be inline would be too tight, so this removes it */ | |
} | |
.woocommerce.single-product ul.products li.product:nth-child(n) { | |
margin: 0 2% 11% 2% !important; | |
min-width: 46%; | |
width: 100%!important; | |
} | |
} | |
@media only screen and (max-width: 980px) { | |
.woocommerce.single-product .products ul, .woocommerce.single-product ul.products { | |
margin: 0 8% 1em; | |
} | |
} | |
@media only screen and (max-width: 1280px) { | |
.woocommerce.single-product ul.products li.product .woocommerce-loop-product__title { | |
font-size: 24px !important; | |
} | |
} | |
/******************************************/ | |
/*************** SALE BADGES **************/ | |
/******************************************/ | |
.woocommerce.single-product div.product.sale .et_pb_title_container:before, .single-product span.onsale { | |
display: block; | |
text-align: center; | |
background: #00adad !important; | |
color: #fff; | |
font-weight: 700 !important; | |
border: 0; | |
} | |
.woocommerce.single-product div.product.sale .et_pb_title_container:before { /* badge above h1 post title */ | |
content: "SALE!"!important; | |
position: absolute; | |
top: -1.8em; | |
right: 35%; | |
font-family: inherit; | |
font-size: 1em; | |
padding: 0; | |
width: 70px; | |
height: 70px; | |
line-height: 70px; | |
border-radius: 50%; | |
transform: rotate(6deg); | |
-webkit-transform: rotate(6deg); | |
} | |
.single-product span.onsale { /* badge on default summary box */ | |
position: relative; | |
margin-top: 8% !important; | |
margin-bottom: -8% !important; | |
top: 20px !important; | |
left: -15% !important; | |
width: 120px; | |
height: 120px; | |
font-size: 1.8em; | |
line-height: 120px!important; | |
padding: 0 !important; | |
text-transform: uppercase; | |
border-radius: 50% !important; | |
transform: rotate(-8deg); | |
-webkit-transform: rotate(-8deg); | |
} | |
.woocommerce.single-product ul.products li.product .onsale { /* badge on related products */ | |
position: absolute; | |
top: -20px !important; | |
font-size: 1em !important; | |
width: 70px; | |
height: 70px; | |
line-height: 70px !important; | |
} | |
@media only screen and (max-width: 768px) { | |
.single-product span.onsale { | |
left: -30% !important; | |
width: 90px !important; | |
height: 90px !important; | |
line-height: 90px !important; | |
} | |
.woocommerce.single-product div.product.sale .et_pb_title_container:before { | |
top: -1.7em; | |
right: 25%; | |
font-size: .7em; | |
width: 50px; | |
height: 50px; | |
line-height: 50px !important; | |
} | |
} | |
@media only screen and (max-width: 1024px) { | |
.single-product span.onsale { | |
font-size: 1.2em; | |
} | |
.woocommerce.single-product ul.products li.product .onsale { | |
font-size: .8em !important; | |
width: 60px !important; | |
height: 60px !important; | |
line-height: 60px!important; | |
} | |
} | |
/*************************************************************************************************************/ | |
/*** SEPARATE MEDIA QUERIES FOR TYPOGRAPHY ON LARGE SCREENS - OPTIONAL AND MAY BE MOOT BASED ON YOUR FONTS ***/ | |
/*************************************************************************************************************/ | |
@media only screen and (min-width: 1600px) { | |
body .woocommerce.single-product p, | |
.woocommerce.single-product p { | |
font-size: 22px !important; | |
line-height: 1.6em; | |
} | |
.woocommerce-single-product .et_pb_blurb p, | |
.woocommerce.single-product .et_pb_testimonial_meta { | |
font-size: 18px !important; | |
} | |
span.woocommerce-Price-amount.amount { | |
font-size: 30px; | |
} | |
.woocommerce.single-product .et_pb_title_container h1 { | |
font-size: 4em !important; | |
} | |
.woocommerce.single-product h2, | |
.woocommerce.single-product .related h2 { | |
font-size: 2.5em !important; | |
} | |
.woocommerce.single-product h3, | |
.woocommerce.single-product ul.products li.product h2.woocommerce-loop-product__title { | |
font-size: 1.8em !important; | |
} | |
.woocommerce.single-product span.onsale, | |
.woocommerce.single-product ul.products li.product .onsale, | |
.woocommerce.single-product div.product.sale .et_pb_title_container:before { | |
font-size: 2em !important; | |
width: 140px !important; | |
height: 140px !important; | |
line-height: 140px!important; | |
} | |
.woocommerce.single-product .et_pb_button.et_pb_promo_button { | |
font-size: 1.2em !important; | |
} | |
.woocommerce.single-product .et_pb_blurb .et-pb-icon { | |
font-size: 40px !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment