Featured products to grid

Submitted by Millssy on Thu, 2012-03-01 13:53 in HTML Design

Hi,

Been trying to get my featured products into a grid format.

Have tried adjusting the code from a previous post to do the same thing for the search function without any joy.

Any help is much appreciated.

Hi, The Featured Products /

Submitted by support on Thu, 2012-03-01 14:58

Hi,

The Featured Products / Each template supports the %IF_EVERYn% placeholder, so if you go to wp-admin > Settings > PriceTapestry.org and scroll down to the HTML section and then Featured Products / Each and add the following to the end of the template (after the </td>)

%IF_EVERY3%

</tr><tr>

%ENDIF_EVERY3%

That will start a new row every 3 Featured Products.

Don't forget when using a grid layout to use a number of Featured Products that is a multiple of the number of columns for the tidiest layout...

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Brilliant. The support on

Submitted by Millssy on Thu, 2012-03-01 15:13

Brilliant.

The support on this site is top notch, high five to all those involved with PT

Hi David, Could you please

Submitted by bodybuildingcom... on Wed, 2018-02-07 21:29

Hi David,

Could you please tell me if it is still the same for BETA 3.0? The code seems to be different for the widget? I don't see a ending.

It looks fine on my initial pt installation: {link saved} but really big on my wordpress front page and not lining up like it does on pt installation {link saved}.

Thanks.

Norbert

Hello Norbert, Whilst the

Submitted by support on Thu, 2018-02-08 14:23

Hello Norbert,

Whilst the %IF_EVERY...% placeholders are still supported, the BETA 3.0 templates and CSS are designed to be responsive - for Featured Products this is 2 columns (medium/tablet up) and single column (mobile) however the CSS only sets a width for Featured Products images and looking at your site / template, I think this will work much better with a fixed height - so if you edit the plugin file resources/pto.css and where you have the following style definition beginning at line 55:

.pto_fp img {

  width: 80% !important;

  margin: auto !important;

}

...REPLACE with:

.pto_fp img {

  height: 100px !important;

  margin: auto !important;

}

...or as required. Don't forget to do a hard refresh (CTRL+F5 in most browser) after modifying CSS to ensure that it is reloaded by your browser...

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Thanks David for the quick

Submitted by bodybuildingcom... on Fri, 2018-02-09 22:41

Thanks David for the quick response and solution.