Question 2848 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Button is aligning to the left when using max-width – WordPress

This is my first post here. I’m trying to customize a button of "Add to wishlist"/ "It’s already in wishlist" text in it to a website for a client, and that button is found in 2 separate pages. It’s a website I made in WordPress and Elementor mostly, but I have to customize that button myself because I can’t do it from Wp/Elementor.

I’ve used this code to customize that button:

.tinvwl-loop-button-wrapper{

  background-color: #222529 !important;
  padding: 4px 5px 4px 4px !important;
  margin: 10px 25px 0px 25px !important;
  font-size: 14px !important;
  border-radius: 3px !important;
  font-weight: 600;
  }

The problem is that in the Product page the button looks well in Related Products (Produse Similare in Romanian language) section of the page, but in the Shop page (called Magazin in Romanian) the button has too much space left and right of the text.

I noticed that the buttons share the same classes in both pages, so if I add something like max-width: 160px; then the button goes far to the left in Shop page, and adding margin-left to it won’t work because then it ruins the button on the other page. What can I do to remove all that space left and right inside of the button and have the button similar to the "Read more" (Citeste mai mult) or "Add to cart" (Adauga in cos) buttons?

PS. I know I used too much the !important rule. It’s my first ever website where I’m using CSS and removing the rule from all the code could potentially ruin it all I think and I’d have to start from scratch.

Product page

Shop page

Tags:

4

Answers


  1. 0

    You can add a separate class for one of the buttons where you set the margins you need.

    Login or Signup to reply.
  2. 0

    Simple replace with it, it will working fine

    .tinvwl-loop-button-wrapper {
    margin: 10px 41px 0px 41px !important;
}
    Login or Signup to reply.
  3. 0

    The problem is the background color is set to the button wrapper in loop page.

    .tinvwl-loop-button-wrapper {
   background-color: #222529 !important;
}

    you need to remove the above css line and add it to the button itself.

    .tinvwl_add_to_wishlist_button {
    background-color: #222529 !important;
}

    you will need to add some padding then to the button. There are many !important statements overriding each others. you will need to adjust that, It will be much harder to fix later by adding more.

    Login or Signup to reply.
  4. 0

    Hi George I checked the links you have provided.
    You need to use a parent class that exist in Shop page but not in related products which in your case is .wcpa_has_options and you need to combine this with the button class that you are trying to resize > .tinvwl-loop-button-wrapper

    at the end you will get this class combination which will only change the button size on shop pages.

    .wcpa_has_options .tinvwl-loop-button-wrapper {
width: 152px;
align-self: center;
}

    I have tested it and it works just the way you want!

    Glad to be help. Let me know if you have questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search