Jump to content
chules

WooCommerce & Platform 5

Recommended Posts

chules

I'm using PageLines Platform 5 v 5.0.150 with the Paglines Framework Theme Version 5.0.95

I'm working on a website and using WooCommerce 2.6.4 trying to customize the main shop page to show 3 gallery images on the home shop page.  I came across the following article that is similar to what I wish to do that requires changes to the functions.php theme file and also the style.css file. Here's the article, https://www.wpstud.io/product-gallery-images-shop-page/

I tried these changes on my site but it didn't work as documented.  Does anyone have a suggestion on how this can be done with Platform 5 and the Paglines Framework Theme?  My goal is to show on the main shop page the featured item and then the gallery images representing the variable color options.  You can view the site and the shop page at http://www.christina-lombardi.com/shop/

Thank you

Chules

 

 

Share this post


Link to post
Share on other sites
Simon

The framework theme makes no changes to woocomerce, it doesnt include any actions/filter at all that would interfere.

Where did you add the code?

Share this post


Link to post
Share on other sites
chules

Simon,

In step 2 of the following document, https://www.wpstud.io/product-gallery-images-shop-page/, it states that you need to add code to your theme's function.php.

In step 3 of the document instructs you to add code for css styling to your style.css file.

I made these changes by going into my dashboard-appearance-editor and finding both the functions.php and style.css add adding the code referenced in the document.

My display did not look like the photo in the document with a featured image and 3 thumbnails underneath.  

I've just tried this again but instead of editing the style.css found in dashboard-appearance-editor, I made the css styling change on the actual shop page using the Pagelines Custom Less Plugin.  I've also made the changes as instructed to the functions.php file in dashboard-appearance-editor.  The result is live on my site at  http://www.christina-lombardi.com/shop/ .  You can see the display is not correct.  Instead of displaying the featured image with 3 thumbnails, it's displaying the images all vertically.

Thank you for the assistance

Chules

Share this post


Link to post
Share on other sites
Simon

woocomerce is setting a width of 100% to your images.

you need to add !important to your width declaration.

 

Share this post


Link to post
Share on other sites
chules

Simon,

Thank you for the assistance.  I added the !important width declaration as follows.  I now have the thumbs displaying but I can't seem to find how to increase the space between the thumbs.  I tried changing the px values and percentages but couldn't find the correct option.  Very close.  See result at http://www.christina-lombardi.com/shop/.  

/* Product thumbnails shop page
--------------------------------------------- */
.product-thumbs {
  display: block;
  overflow: auto;
  margin: 10px 0;
  width :100%;
}

.product-thumbs .thumb {
  float: left;
  margin-bottom: 10px;
  width: 30% !important;
}

.product-thumbs .thumb:nth-child(2) {
  margin: 0 5%;
}

 

Share this post


Link to post
Share on other sites
Simon

add a little margin-right under the float left.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×