Steps Products

Divi Theme Builder Template!

Woocommerce products template using the Divi 4+ Theme Builder Template to create beatiful custom single product pages.

The template contains Custom Product VariationsAdd to Cart Button, Price, Description, header & footer. Also contains Navigation Buttons for previous & next products using our plugin ‘Product Navigation’ and pop up video using our plugin ‘Gdo Modal‘.

The zip file contains the Steps-Products.json Divi 4+ Theme Builder Template and the plugins ‘Product Navigation’ & ‘Gdo Modal’.

STEP 1

Install Divi theme v4+ by ElegantThemes 
and activate it.

STEP 2

Go to Divi > Theme Builder and Import Steps-Products.json file.  Manage template assignments to your product categories.

STEP 3

Install the plugins ‘Product Navigation’ & ‘Gdo Modal’.

STEP 4

Set the settings for the ‘Product Navigation’ module. View help at https://gdo.com/navigation

STEP 5

Set the settings for the ‘Gdo Modal’ module. View help at https://gdo.com/modal.

STEP 6

Copy & Paste the below CSS code to Page Layout Settings > Advanced Custom CSS tab.

.embed-container { position: relative;  padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 75% }
.orderby, .woocommerce div.product form.cart .variations td select {
    padding: 6px 10px;
    border: 10px;
    background-color: #ffffff;
}
.et_pb_wc_add_to_cart_0_tb_body label {
    font-family: 'montserrat',Helvetica,Arial,Lucida,sans-serif !important;
    font-weight: bold !important;
}
select {
  /* styling */
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  /* reset */
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#size, #color  {
  background-image:
    linear-gradient(45deg, transparent 50%, #ff7068 50%),
    linear-gradient(135deg, #ff7068 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) ,
    calc(100% - 15px) ,
    calc(100%);
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  padding-right : 30px !important;
}
#size:focus, #color:focus {
  background-image:
    linear-gradient(45deg, #ff7068 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #ff7068 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
  padding-right : 30px !important;
}
.woocommerce div.product form.cart .variations td select {
    font-family: "montserrat",Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #ff7068!important;
}
.reset_variations {
  color: #ff7068!important;
  font-family: 'montserrat',Helvetica,Arial,Lucida,sans-serif !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
    background-color: transparent !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    background: transparent;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    border: 2px solid #ff7068;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
    background: #ff7068;
}

Contact us

15 + 7 =

Bitnami