[KiomatriParticipant]

A good day to you all,

The following is what I get my head stuck on:
I have a few pages in which all first products of each row are customizable through a plugin.
To show visitors that this is in fact possible I would like to have an other background color behind these products.
(If possible, as you see in the photoshopped screenshot, I would also like to have the text above the columns)

Link to the page: http://jorcustom.prodonk.nl/product-categorie/normal-tee/page/3/

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.woocommerce .products .product_cat-jorcustom-bar {
    background-color: #EFEFEF !important;
}

Hope this helps.

[KiomatriParticipant]

This doesn’t seem to do anything to be honest.
+ how would this only target the first column of products?

I thought it would have something to do with:

.woocommerce li.product.first {

    ...

}

But I can’t seem to get anything working with that selector.

[Rue NelModerator]

Hello There,

The code should work however because there were no space around the column, you did not see that it works out. To resolve that please have this custom css code instead:

.woocommerce .cols-4 li.product, 
.woocommerce.columns-4 li.product {
  width: 25%;
  margin: 0;
  padding: 15px;
  border-radius: 0;
  box-shadow: none;
}

.woocommerce li.product.first {
  background-color: #e5e5e5;
}

This is how it looks: http://prntscr.com/amobev

Hope this helps. Please let us know how it goes.

[KiomatriParticipant]

This seems to do the trick perfectly, thanks alot!

Do you think it’s also possible to display the text above the field?

[RadModerator]

Hi there,

Glad to hear that!

Do you mean above the feature image? I’m not sure what field you’re currently referring.

Thanks!

[KiomatriParticipant]

Ow sorry haha,

What I meant was the texts “customize” and “direct order”

[ChristopherModerator]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[KiomatriParticipant]

Sorry for any inconvenience, what I meant was the red circled area’s (the text) in the following image:

[JadeModerator]

Hi there,

Please try this CSS:

.woocommerce .products li:first-child:before {
    content: 'Customize';
}

.woocommerce .products li:nth-child(3):before {
    content: 'Direct Order';

}

.woocommerce .products li:first-child:before,
.woocommerce .products li:nth-child(3):before {
    font-size: 150%;
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.woocommerce .products li:nth-child(2),
.woocommerce .products li:nth-child(4) {
    padding-top: 65px;
}

Hope this helps.

[Author]

Posts