Product Grid Design Sugesstions

[niwo]

Hi,

I’ve noticed some issues here.

PRICES
The prices shouldn’t be side by side, but underneath.
The sale price should be slightly bigger.
The previous price grayed out.

PRICE INFO SPACING
I’m not sure, why that is, but the space between price, “incl. VAT” and “plus Shipping Costs” is too big.
Make no sense to me. I’ve changed it with CSS.

COUNTDOWN TIMER
Is way too big. The size should be adjustable.

SALE LABEL and PERCENTAGE
Sometimes it displays the number but not always. WHY?

Regards

• This topic was modified 2 years ago by niwo.

Attachments:

You must be logged in to view attached files.

Hello,

You can select another design in the Theme Settings > Product Archive > Product style.

Alternatively, we can correct something with custom CSS, please insert the site admin access into the Private content below the message area.

Best Regards

In your suggested case, also everything else will be changed to a different style.
By changing the style, I guess also there will be similar design issues.
The animations and position of the image overlay buttons are fine to me as they are now.

Just those designs mentioned are off to my understanding of good marketing and UX.

Most important at the moment would be the design of the price display and to understand how to show the sales label as percentage instead of just “sale”.

Regards

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

/*hot*/
body .labels-rectangular .featured {
color:#ffffff;
background-color:#000000;
font-size:12px;
}
/*new*/
body .labels-rectangular .new{
color:#ffffff;
background-color:#000000;
font-size:12px;
}
/*new*/
body .labels-rectangular .new{
color:#ffffff;
background-color:#000000;
font-size:12px;
}

This code allows changing the labels as per your needs.

Best Regards

Hi, the label color can be changed via theme settings.
It’s not about the color but the content.
It shows “Sale” or “10%”.

How to make it to show either just “Sale” or the amount like “10 %”.

Regards

[niwo]

In addition, I would like to know, how to change the COUNTDOWN TIMER design.
Is way too big. The size should be adjustable. 🙂

I guess there is also a bug with the sales label.
The color isn’t showing the colors set in the theme settings.

Regards

• This reply was modified 2 years ago by niwo.

Hello,

Please provide the page URL with the counter. I will give you custom CSS.

If you have any questions please feel free to contact us.

Best Regards

Hi,

see the extra information.

Pease pay attention to the following issues:

1. COUNTDOWN TIMER design
Is too big.
How to control the size in the product archive page and the product single page separately?

2. SALES Label
It shows “Sale” or “10%”.
How to make it show either just “Sale” or the amount like “10 %”?

3. SALES Label colors
Also, the colors of the sales label are not as set in the theme settings.
Why is that? Bug?

Thank you very much for your effort.

Regards

Regards

Hello,

1. Please clear the cache, I see 10% in the sale: https://gyazo.com/c96525819d45ed4f1599b3e239e8b353

2. This code would reduce the countdown:

body .wd-timer>span{
	width:2em!important;
	padding:2px;
	font-size:15px;
}

3. This code would change the background in the sales label:

body .product-labels .product-label.onsale {
 background-color:yellow!important; 
}

Best Regards

Hello,

1. Please clear the cache, I see 10% in the sale: https://gyazo.com/c96525819d45ed4f1599b3e239e8b353

2. This code would reduce the countdown:

body .wd-timer>span{
	width:2em!important;
	padding:2px;
	font-size:15px;
}

3. This code would change the background in the sales label:

body .product-labels .product-label.onsale {
 background-color:yellow!important; 
}

Best Regards

Hi,

thank you.

Please, pay attention to the following issues:

1. COUNTDOWN TIMER design
How to control the size of the product archive page and the product single page separately?

2. SALES Label
It shows “Sale” or “10%”.
Check out other products on the product archive page.
How to make it show either just “Sale” or the amount like “10 %”?

3. SALES Label colors
Is that a Bug or why is it not using the colors from the theme setting?

Regards

Hello,

Variable product has a different variation which may have different presentage of the discount, which is why the percentage is replaced with “Sale” as soon as the buyer select the variety, he sees the price with the discount.

This code would be applied to the grid only:

.product-grid-item .wd-timer>span{
	width:2em!important;
	padding:2px;
	font-size:15px;
}

The label inherent the background color configured in the Theme Settings > Styles.

If you have any questions please feel free to contact us.

Best Regards

Thank you very much for the code. 🙂

There is no variable product at the moment.
It must be another reason.

3. SALES Label colors
Is that a Bug or why is it not using the colors from the theme setting?

Regards

Hello,

Most likely you used custom CSS or other plugins influence.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts