Button size

  • Resolved syntve

    (@syntve)


    1 year, 12 months ago

    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)

    1 year, 11 months ago

    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)

    1 year, 11 months ago

    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)

    1 year, 11 months ago

    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)

    1 year, 11 months ago

    Thank you for helping me, this solved my problem.

    Thread Starter syntve

    (@syntve)

    1 year, 11 months ago

    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)

    1 year, 9 months ago

    Is it possible to fix this?

    Md Abdullah Al Arif

    (@faithcoder)

    1 year, 9 months ago

    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)

    1 year, 9 months ago

    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)

The topic ‘Button size’ is closed to new replies.