• Resolved syntve

    (@syntve)


    Hi,

    I have an issue where the buy now button on the archive page changes class name when I activate the quantity function on the archive pages. This makes it impossible to change the button with CSS without also changing the button on the product page as the class for those buttons is changed to the same class.? I really want to change the button so that it would align with the quantity box, and not take up so much space. It is also a difference in the size of the button on the variable products and the single products. Is there a way to fix this??

    https://safety.nortek.st/produktkategori/brannalarm/spesialdeteksjon/linjedetektor/

    Best regards

    <span style=”background-color: rgb(251, 251, 251); color: rgb(50, 55, 60); font-family: "Open Sans", sans-serif; font-size: 14.4px; white-space-collapse: collapse;”>Synn?ve</span>

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Md. Ibrahim Khalil

    (@mdibrahimk48)

    Could you explain it with some screenshots or a screen-recorded demonstration video? So that, we can understand your issue and requirements clearly. Thanks for your cooperation.

    Thread Starter syntve

    (@syntve)

    Hi,
    When activating the Archive Quantity Box in the plugin settings, the class for the button on the archive page changes and becomes the same as the one in the product page. This makes it impossible to edit them with CSS without changing them both.

    I have added a link so you can see:

    https://www.garasje-loftet.no/wp-content/uploads/2024/04/Button.png

    Plugin Contributor Md. Ibrahim Khalil

    (@mdibrahimk48)

    Hello,

    Use this CSS code to change the width of the button from the Archive Page:

    .button,.ct-button,.added_to_cart,.ct-button-ghost,[type=submit],.wp-element-button,.wp-block-button__link,button.regform-button,button[class*=ajax],.woocommerce button.button,.woocommerce-message .showlogin,.woocommerce-message .restore-item,.forminator-ui[data-design=none] .forminator-button,.fluentform .ff-el-group button.ff-btn,.ct-button-secondary-text {
    width: 55px !important;
    }

    Thread Starter syntve

    (@syntve)

    Thank you for helping me, this solved my problem.

    Thread Starter syntve

    (@syntve)

    Hello again. I see now that the issue was not solved. When adding this CSS. Other buttons on our site also changes. Not only the one on the archive pages.

    https://www.garasje-loftet.no/wp-content/uploads/2024/04/Skjermbilde-2024-04-26-kl.-10.59.17.png

    Thread Starter syntve

    (@syntve)

    Is it possible to fix this?

    Hi @syntve,

    Hope you are well. You know that most of the styles are coming from the Theme you’re using. Please use this code for your Additional CSS:

    //for archive page
    .ct-woo-card-actions > form.cart > .ct-cart-actions {
    align-items: center !important;
    justify-content: center !important;
    }
    .ct-woo-card-actions > form.cart > .ct-cart-actions > button {
    max-width: 70px;
    display: inline-block;
    padding: 0 !important;
    margin: 0 auto;
    }

    //for single product page
    .ct-product-add-to-cart > form.cart > .ct-cart-actions > button {
    max-width: 70px !important;
    padding: 0 !important;
    display: inline-block;
    }

    This will center-align the quantity field and Buy button [screenshot]. I hope this style doesn’t affect other buttons on the site.

    Kind Regards

    Arif

    Thread Starter syntve

    (@syntve)

    Md Abdullah Al Arif Thank you so much! This worked. And it did not affect the other buttons.

    Best regards Synn?ve

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.