Home Forums WoodMart support forum Product Grid Design Sugesstions

Product Grid Design Sugesstions

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #415879

    niwo
    Participant

    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, 1 month ago by niwo.
    Attachments:
    You must be logged in to view attached files.
    #415911

    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

    #415957

    niwo
    Participant

    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

    #416014

    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

    #416508

    niwo
    Participant

    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

    #416544

    niwo
    Participant

    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.
    #416579

    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

    #417130

    niwo
    Participant

    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

    #417184

    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

    #417185

    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

    #417331

    niwo
    Participant

    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

    #417428

    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

    #417597

    niwo
    Participant

    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

    #417760

    Hello,

    Most likely you used custom CSS or other plugins influence.

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

    Best Regards

Viewing 14 posts - 1 through 14 (of 14 total)