• 0

Target a specific jigoshop product page is CSS

Question

Posted · Report post

Hi All,

 

Does anyone know how I can target a specific product page with pagelines (2.4.5) and jigoshop.  I want to target it like I would with an individual page or post (eg .page-id-42) but can't seem to work out how.  (The actual page I want to target it here: http://www.poppi-b.co.uk/product-category/dresses/)

 

Many thanks,

 

Glyn

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

.term-dresses li a img {width:250px!important;height:250px!important }
.term-dresses .products li {width:250px!important}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

here are the classes for that page

<body class="archive tax-product_cat term-dresses term-42 custom responsive pagelines product_archive full_width jigoshop jigoshop-products jigoshop-product_cat">

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI Messer,

 

Thanks for your reply.  I found that class but it didn't work, i.e. when I added it to CSS that I already have to change the size of the images it stopped the code working altogether instead just targeting that page.  For example, the CSS below makes my product page images 250px square:

 

ul.products li a img {width:250px!important;height:250px!important }
.products li {width:250px!important}

 

but if I use the following then the images go back to their default size on all product pages:

 

archive tax-product_cat term-dresses term-42 custom responsive pagelines product_archive full_width jigoshop jigoshop-products jigoshop-product_cat ul.products li a img {width:250px!important;height:250px!important }

.products li {width:250px!important}

 

Is there another way to identify just that page?

 

Thanks

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

.jigoshop-product_cat .term-dresses {}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No joy with that either I'm afraid... I have tried both the below and neither work:

 

.jigoshop-product_cat .term-dresses ul.products li a img {width:250px!important;height:250px!important }

 

ul.products li a img .jigoshop-product_cat .term-dresses {width:250px!important;height:250px!important }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Looks like you figured it out, they are 250x250 now

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI Simon,

 

Yes they are but I want the images on that product page to be 375 x 250, that's why I'm trying to find the code to target just that page...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ok, so why not post here the code you are using to make them 250x250

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI Simon,

 

It's the code I included before - I just need to be able to make this apply to one specific product page...

 

ul.products li a img {width:250px!important;height:250px!important }
.products li {width:250px!important}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

can you remove that css from your site then as it make it impossible to test with it there

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yep... the code has gone...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You are literally awesome!  Thank you so much!!

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