Product Page: Rich Info

Scroll to shortcode

Custom product page

Click preview to see this layout in action! To learn more about custom product pages in Flatsome, take a look at the docs.

Preview

Flatsome docs

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&#8217;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%;
}

How to use Flatresources

Using Flatresources with your Flatsome website is easy as a breeze.

First, copy the provided Shortcode and paste it to the text page editor or directly to the UX Builder.

1. Copy and paste the Shortcode

Copying the Shortcode
Pasting the Shortcode using UX Builder import function
Pasting the Shortcode to the page text editor

2. Add the custom CSS code

Second, copy the CSS code (if provided) and paste it into your project to achieve the desired appearance.

There are multiple methods of adding and updating CSS code in WordPress, so let's look at each one of them.

Using a plugin (Simple Custom CSS and JS PRO)

This is our preferred method because it allows you to create multiple stylesheets to keep things neat and tidy. If you upgrade to the paid license, you will be able to apply the CSS code only to selected URLs, keep track of revisions, and much more.

Adding CSS using the Simple Custom CSS and JS plugin
WordPress Additional CSS

Appearance → Customize → Additional CSS

Adding CSS using the WordPress Additional CSS
Flatsome Custom CSS

Flatsome → Advanced → Custom CSS

Adding CSS using Flatsome Custom CSS
Theme style.css

Appearance → Theme Editor → style.css

Adding CSS using theme Stylesheet