alignment of content

Hi @bapestars

Thank you for reaching out!

I have tried to align the add to cart buttons (for related products section) to center using Custom CSS, and here is the output: https://d.pr/i/LHNguK

You can try the CSS code as well:

/* RP ATC buttons aligned center | 5427505-zen | NS */

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    margin-left: auto !important;
    margin-right: auto !important;
}

To implement the above Custom CSS, kindly navigate to WP Admin > Appearance > Customize > Additional CSS > and add the Custom CSS there.

Let us know if this works for you.

thank you so much for your help~
it worked for me. ?
@nawaz0705

Hi @bapestars!

That’s great!

I am glad it worked for you, and we were able to help ??

If you have a few minutes, we would love it if you could leave us a review here: https://www.ads-software.com/support/plugin/woocommerce/reviews/.

Cheers!

@judagutor @nawaz0705 i realized the variable one is not aligned and when i use the same code but replace the simple product with variable it doesn’t work.

Hi there,

Thanks for getting back to us.

Can you share the product URL where I can replicate this issue? I can see following page is showing correctly:

https://ragdoll.la/product/%EF%B8%B5%E2%80%BF%E0%AD%A8%E2%99%A1%E0%AD%A7%E2%80%BF%EF%B8%B5/

Thanks.

@daniyalahmedk thank you for getting back to me!
that link is actually the variable product, so from another product page it shows only under related products.
i will attatch a link!

i hope you can understand~

Hi @bapestars

Thanks for getting back to us, I do see what you’re referencing on the variable product. Can you please share with us how you modified the above snippet for the variable product? We’d be happy to take a look and see if we can guide you further on this.

Thanks!

@snaacks
i tried using the code that @nawaz0705 gave me.

/* RP ATC buttons aligned center | 5427505-zen | NS */

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    margin-left: auto !important;
    margin-right: auto !important;
}

all i did was trying to replace simple to variable and i deleted the ajax part.
however, it didnt work for me.

Hello,

Can you replace the above CSS with below and let us know if it works?

a.button.add_to_cart_button{
    margin-left: auto !important;
    margin-right: auto !important;
}

@maykato thank you very much~ it worked for me. ?

Hi @bapestars

Happy to know that solution shared by @maykato worked for you!

I’ll go ahead and mark this thread as resolved now.

If you have a few minutes, we’d love it if you could share your experience with the community by leaving a review for WooCommerce: https://www.ads-software.com/support/plugin/woocommerce/reviews/

Thank you! ??