Shortcode
[section label="*Product Page: Rich Info" padding="66px" padding__sm="18px" padding__md="42px" class="cpl-rich-info"]
[gap]
[row label="Adjusted container width" width="custom" custom_width="1158px" h_align="center"]
[col span__sm="12"]
[row_inner]
[col_inner span="6" span__sm="12" span__md="12" padding__md="0px 0px 0px 0px" margin="0px 0px 0px 0px" margin__md="0px 0px 18px 0px"]
[row_inner_1 style="collapse" width="custom" custom_width="506px"]
[col_inner_1 span__sm="12"]
[ux_product_gallery]
[/col_inner_1]
[/row_inner_1]
[/col_inner]
[col_inner span="6" span__sm="12" span__md="12" padding__md="0px 0px 0px 0px"]
[row_inner_1 style="collapse" width="custom" custom_width="400px"]
[col_inner_1 span__sm="12"]
[ux_product_title divider="0"]
[ux_product_price]
[ux_product_excerpt]
[ux_product_add_to_cart style="minimal"]
[/col_inner_1]
[/row_inner_1]
[/col_inner]
[/row_inner]
[gap height="96px" height__sm="32px" height__md="64px"]
[ux_product_tabs align="center"]
[/col]
[/row]
[/section]
[section label="*FAQ" bg_color="rgb(255,255,255)" padding="66px" padding__sm="18px" padding__md="42px" class="cpl-rich-info-faq"]
[gap]
[row label="Adjusted container width" width="custom" custom_width="1158px"]
[col span__sm="12" align="left"]
[row_inner style="collapse" width="custom" custom_width="718px"]
[col_inner span__sm="12"]
[ux_text text_align="center"]
<h2 class="heading">Common questions</h2>
[/ux_text]
[gap]
[accordion]
[accordion-item title="What materials do you use in your products?"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum. Donec vehicula sed lacus at venenatis. Sed pulvinar arcu eros, sit amet molestie dui tempus sit amet. Ut porta erat arcu, sed luctus leo porta id.</p>
[/accordion-item]
[accordion-item title="Where is the sizing guide?"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum. Donec vehicula sed lacus at venenatis. Sed pulvinar arcu eros, sit amet molestie dui tempus sit amet. Ut porta erat arcu, sed luctus leo porta id.</p>
[/accordion-item]
[accordion-item title="Do you offer any warranty?"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum. Donec vehicula sed lacus at venenatis. Sed pulvinar arcu eros, sit amet molestie dui tempus sit amet. Ut porta erat arcu, sed luctus leo porta id.</p>
[/accordion-item]
[accordion-item title="Which payment methods do you accept?"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum. Donec vehicula sed lacus at venenatis. Sed pulvinar arcu eros, sit amet molestie dui tempus sit amet. Ut porta erat arcu, sed luctus leo porta id.</p>
[/accordion-item]
[/accordion]
[gap height="48px"]
[ux_text text_align="center"]
<p class="is-small no-margin">Didn’t find what you were looking for? <a href="#">Get in touch</a></p>
[/ux_text]
[/col_inner]
[/row_inner]
[/col]
[/row]
[/section]
[section label="*Reviews" bg_color="rgb(248, 248, 248)" padding="66px" padding__sm="18px" padding__md="42px" class="cpl-rich-info-reviews"]
[gap]
[row label="Adjusted container width" width="custom" custom_width="1158px"]
[col span__sm="12" align="center"]
<h2 class="heading">Customers love our products</h2>
[/col]
[col span="6" span__sm="12"]
[row_inner style="collapse" width="custom" custom_width="400px"]
[col_inner span__sm="12"]
[testimonial image_width="20" name="Derek Brown"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum.</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[col span="6" span__sm="12"]
[row_inner style="collapse" width="custom" custom_width="400px"]
[col_inner span__sm="12"]
[testimonial image_width="20" name="Sarah Eisley"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum.</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[col span="6" span__sm="12"]
[row_inner style="collapse" width="custom" custom_width="400px"]
[col_inner span__sm="12"]
[testimonial image_width="20" name="Ken Wood"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum.</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[col span="6" span__sm="12"]
[row_inner style="collapse" width="custom" custom_width="400px"]
[col_inner span__sm="12"]
[testimonial image_width="20" name="Anna Wright"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam est vel lacus hendrerit fermentum. Nunc ornare ornare dictum.</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[/row]
[/section]
[section label="Related products + Up-sells" bg_color="rgb(255,255,255)" padding="66px" padding__sm="18px" padding__md="42px" class="cpl-rich-info-faq" visibility="hidden"]
[gap]
[row label="Adjusted container width" width="custom" custom_width="1158px"]
[col span__sm="12" align="left"]
[ux_product_related]
[ux_product_upsell style="grid"]
[/col]
[/row]
[/section]
CSS
/*---------- Product Page: Rich Info ----------*/
/* Product main */
.cpl-rich-info h1.product-title {
font-size: 250%; /* 40px */
line-height: 1.1;
margin-bottom: 32px;
}
.cpl-rich-info span.amount {
font-size: 18px;
}
.cpl-rich-info del > span.amount {
opacity: 0.5;
}
.cpl-rich-info select#size {
border-radius: 6px; /* Change to match your global settings */
height: 40px;
}
@media screen and (max-width:549px) {
.cpl-rich-info h1.product-title {
font-size: 150%; /* 24px */
line-height: 1.4;
margin-bottom: 24px;
}
.cpl-rich-info-reviews h2.heading {
font-size: 150%; /* 24px */
line-height: 1.4;
}
}
/* Reviews + FAQ section */
.cpl-rich-info-reviews h2.heading,
.cpl-rich-info-faq h2.heading {
font-size: 200%; /* 32px */
line-height: 1.2;
}
.cpl-rich-info-reviews .star-rating {
margin-bottom: 24px;
}
.cpl-rich-info-reviews .star-rating span:before {
color: #141414;
}
.cpl-rich-info-reviews .testimonial-text > p {
font-style: normal;
}
.cpl-rich-info-reviews strong.testimonial-name {
opacity: 0.5;
}
/* Other sections */
.cpl-rich-info .related-products-wrapper .container-width {
max-width: 100%;
}