Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 18, 2022 at 3:57 am #1355651
    sdsitetechdotcom

    When an item is put on sale, the sale price gets cropped out a little bit on the Plugin Addition “Product List”. How can this be fixed? Please see the included screenshot of the issue at hand.

    issue

    • This topic was modified 2 years, 5 months ago by sdsitetechdotcom. Reason: fixed image link
    June 18, 2022 at 10:50 am #1355678
    Rikard

    Hey sdsitetechdotcom,

    Thanks for the login details. Could you post a link to where we could see the actual problem please?

    Best regards,
    Rikard

    June 18, 2022 at 7:07 pm #1355706
    sdsitetechdotcom

    Yes, please see the private content below.

    June 18, 2022 at 10:11 pm #1355717
    Mike

    Hi,
    Thanks for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    .av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
	position: absolute;
    top: 30px;
    left: 0;
}
#top #wrap_all .av-catalogue-price.av-cart-update-price > ins:before {
	display: none;
}
.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount .woocommerce-Price-currencySymbol:before {
	content: "\2219";
    text-decoration: none;
    display: inline-block;
    padding: 0 4px 0 3px;
    font-size: 20px;
    line-height: 12px;
}

    After applying the css, please clear your browser cache and check.

    If you don’t want the star before the sale price the use this instead:

    .av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
	position: absolute;
    top: 30px;
    left: 0;
}
#top #wrap_all .av-catalogue-price.av-cart-update-price > ins:before {
	display: none;
}

    Best regards,
    Mike

    June 20, 2022 at 8:37 pm #1355886
    sdsitetechdotcom

    Mike,

    Thank you for supplying the fix. I decided I am going to use the one that includes the star. Really appreciate your help on this.

    June 20, 2022 at 10:58 pm #1355901
    sdsitetechdotcom

    I’m now dealing with another issue that I believe to be related to the code supplied by Mike. I have created a new page on my website, and have added a Product List. The prices are being put right behind the product names. Could I please have some assistance with positioning the prices so they show up properly on this page?

    Please see the link to the issue at hand in the private content.

    June 21, 2022 at 5:31 am #1355931
    Nikko

    Hi sdsitetechdotcom,

    Can you try adding this CSS code as well:

    #top .av-catalogue-item-inner .av-catalogue-title {
    padding-right: 80px;
    padding-left: 100px;
    padding-bottom: 25px;
}

    Best regards,
    Nikko

    June 21, 2022 at 5:39 am #1355933
    sdsitetechdotcom

    Thanks, that solved the issue. Would it be possible to reduce the padding when it is a multi-line product title, and if their is a price range, change the padding between that? Please see the screenshots included within the private content area. Thank you for your help

    June 21, 2022 at 5:55 am #1355939
    Nikko

    Hi sdsitetechdotcom,

    Please remove the last code I gave and replace it with this one:

    #top .av-catalogue-item-inner .av-catalogue-title-container {
    line-height: 1.4;
}

#top .av-catalogue-item-inner .av-catalogue-title {
    padding: 10px 80px 25px 100px;
}

#top .av-catalogue-item-inner .av-catalogue-price {
    line-height: 0.8;
    top: 8px;
}

    Best regards,
    Nikko

    June 21, 2022 at 6:03 am #1355940
    sdsitetechdotcom

    Awesome, thank you. Would I be able to change the padding shown in the screenshot with a similar code, changing .av-catalogue-title to 1px 15px 1px 100px? I tried doing this in the element editor but changing it to 1px seemed to not get it as skinny as I wanted. I’m trying to get it pretty skinny…again thank you for the continuous help.

    June 21, 2022 at 9:22 am #1355956
    Rikard

    Hi,

    Thanks for the update. Please try changing Nikkos CSS to this:

    #top .av-catalogue-item-inner .av-catalogue-title-container {
    line-height: 1.4;
}

#top .av-catalogue-item-inner .av-catalogue-title {
    padding: 5px 80px 5px 100px;
}

#top .av-catalogue-item-inner .av-catalogue-price {
    line-height: 0.8;
    top: 8px;
}

    Best regards,
    Rikard

    June 21, 2022 at 9:54 am #1355964
    sdsitetechdotcom

    Thank you for supplying me with that code. It is almost perfect. I really like the minimal spacing as this helps reduce unnecessary page length, but sale/variation prices are now being cut off again after applying the modifications. Please see the attached screenshots in the private area of this reply.

    Are there any suggestions to be able to have the minimal space while also preserving the visibility of the sale/variation prices?

    Thank you…

    June 21, 2022 at 10:01 am #1355965
    sdsitetechdotcom

    Also, because mobile forces the title to go multi-line, the prices show up fine only on mobile. I’m also trying to remove the right padding that shows up on mobile…I outlined it in the screenshot.

    Thank you again for being so helpful throughout this process.

    June 21, 2022 at 11:23 am #1355978
    Rikard

    Hi,

    Please try to adjust this CSS which Mike posted as well:

    .av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
    position: absolute;
    top: 30px;
    left: 0;
}

    Try setting the top value to 15 or 20px for example.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.