Product Page Pack - Files

In this guide, I'll walk you through the process of importing and applying a custom product page pack to your WooCommerce site. This pack is designed for WooCommerce and allows you to customize your product pages using different templates, perform A/B testing, and apply specific layouts for individual products or categories.

Step 1: Install WordPress, WooCommerce, and Flatsome

  1. Ensure your setup: Make sure that you have WordPress, WooCommerce, and the Flatsome theme installed and running on your site. If your online store is already set up, you’re good to go.

Step 2: Download the Product Page Pack

  1. Access the pack: After purchasing, head to the member area to download the Product Page Pack in an XML format.
  2. Save the XML file to a convenient location on your computer, as you’ll need it for the next steps.
icon

Click on the ZIP to download the XML file

productpagepack.wordpress.xml.zip11.1KB

Step 3: Import the Product Page Pack XML File

  1. Navigate to Tools > Import: In your WordPress dashboard, go to Tools on the left sidebar and select Import.
  2. Run the WordPress Importer: Scroll to the WordPress Importer option and click Run Importer.
  3. Upload the XML File: Select the product page pack XML file you downloaded and upload it.
  4. Assign User: If you have multiple users, assign the content to the correct user. You can skip importing attachments since the pack doesn't include any.
  5. Complete Import: Finish the import, and the custom templates should now be available.

Step 4: Add Custom CSS

  1. Get the Custom CSS: Copy the custom CSS provided with the product page pack.
  2. Go to Flatsome > Advanced: In the WordPress dashboard, navigate to Flatsome > Advanced.
  3. Add Custom CSS: In the Custom CSS section, paste the CSS code. Make sure to apply it to all screen sizes (desktop, tablet, and mobile).
  4. Save Changes: Once added, save your changes to apply the CSS across your site.
Tip: Check the member area periodically for CSS updates that may enhance or debug the templates.
/*************** STYLING: ADD TO CART BUTTON ***************/

.single_add_to_cart_button.button {
    padding: 0.5em 1.2em; /* Customise size of addd to cart button */
    flex: 1 1 auto; /* Force full width through flexbox  */
}

input[type=number] {
    height: auto !important; /* Auto adjust quantity box height */
}

/*************** STYLING: ACCORDION ***************/

.accordion-title {
    border-top: 0px;
    font-size: 90%;
    font-weight: 700;
}

.accordion-item {
    background: #f1efe9; /* Change accordion background color */
    margin-bottom: 10px;
    border-radius: 20px;
    padding: 10px;
}

.dark .accordion-item {
    background: #292933; /* DARK: Change accordion background color */
    margin-bottom: 10px;
    border-radius: 20px;
    padding: 10px;
}

.accordion-big .accordion-item {
    background: #f1efe9;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 20px;
}

.accordion-big .accordion-title {
    border-top: 0px;
    font-size: 100%;
}

.accordion-title.active {
    background-color: transparent;
}

.accordion-item .toggle i {
    font-size: 1em;
}

.accordion-inner {
    padding: 1em;
}

/*************** PRODUCT PAGE GENERAL ***************/

.single-product ul li.bullet-checkmark {
    padding: 0px 0px 0px 25px;
    border-bottom: 0px;
    font-size: 95%;
}

.single-product .container-width {
    max-width: 100%;
}

.product-section-title.uppercase {
    text-transform: none;
    letter-spacing: 0px;
    padding: 30px 0px 0px 0px;
    font-size: 130%;
}

#wrapper>.message-wrapper {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/*************** PRODUCT PAGE 01 ***************/

.product-page-01 h1.product_title {
    margin: 0px;
}

.product-page-01 .flickity-viewport, .product-page-01 .fill {
    border-radius: 10px;
}

.product-page-01 .product-thumbnails a {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.product-page-01 .product-thumbnails .is-nav-selected a {
    border-color: #424FE4;
}

.product-page-01 .has-border {
    border-radius: 10px;
    border-width: 1px;
}

.product-page-01 .product-page-sections .large-2, .product-page-01 .product-page-sections .large-10 {
    max-width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}

.product-page-01 .product-page-sections .uppercase.mt {
    text-transform: none;
    margin-bottom: -10px;
    letter-spacing: 0px;
}

/*************** PRODUCT PAGE 03 ***************/


@media screen and (min-width: 550px) {
  .product-page-03 .flickity-slider>div:not(.col) {
    width: 50% !important;
  }
}

@media screen and (min-width: 849px) {
  .product-page-03 .flickity-slider>div:not(.col) {
    width: 40% !important;
  }
}

@media screen and (min-width: 1200px) {
  .product-page-03 .flickity-slider>div:not(.col) {
    width: 30% !important;
  }
}

@media screen and (max-width: 549px) {
.product-page-03 .slider-wrapper .flickity-prev-next-button {
    display: inherit;
}
}

.product-page-03 .flickity-prev-next-button {
    opacity: 1;
}

/*************** PRODUCT PAGE 07 ***************/

.product-page-07 .row-full-width:not(.row-full-width .row-full-width, .row-full-width.row-slider, .row-expand) {
	padding-left: 0px !important;
    padding-right: 0px !important;
  @include for-desktop-up {
    padding-left: 110px !important;
    padding-right: 110px !important;
  }
}

.product-page-07 .row:first-of-type .row:not(.row-collapse) {
    margin-left: 0px;
    margin-right: 0px;
}

.product-page-07 .row-full-width.row-slider {
	padding-left: 0px !important;
    padding-right: 0px !important;
  @include for-desktop-up {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

Step 5: Choose a Product Page Template for Individual Products

  1. Go to Products: In the WordPress dashboard, open Products and select a product to apply a custom template.
  2. Select Template in Product Layout: Scroll to the Product Layout section. Here, choose a specific template (e.g., Product Page 1, Product Page 2, etc.) to assign to that product.
  3. Update Product: Once selected, click Update to apply the template.
Preview: Visit the product page to ensure the template appears as expected. You can test different templates and see what works best.

Step 6: Set a Default Template for All Products

  1. Navigate to Flatsome Theme Options: Go to Flatsome > Theme Options > WooCommerce > Product Page.
  2. Set Global Layout: Under Custom Product Layout, select a template to be the default layout for all products.
  3. Publish Changes: Click Publish to make this template the standard layout across your entire store.

Step 7: Assign Templates Based on Product Categories

  1. Go to Products > Categories: In the dashboard, navigate to Products > Categories.
  2. Select a Category: Choose a category, such as Gaming, to apply a specific template (e.g., Product Page 4).
  3. Assign Custom Layout: Within the category settings, assign the custom product page template.
  4. Save Changes: Update the category to apply the template to all products in that category.

You're All Set!

Your WooCommerce site now features fully customizable product pages, giving you the flexibility to experiment with different layouts, assign templates by category, and even test which layout boosts conversions.