Centering Price And 'Add To Cart' Button As One Element

Hello,

I am trying to center the price and 'add to cart' buttons displayed on our product listing pages. On all of our listings, the 'BUY NOW' button is the 'Add To Cart' button. Please see the following URL for an example:
https://cncmachines.net/2456/haas-st20-3/

I've also attached a screenshot to give a clearer picture of what we are trying to do. The screenshot has two prices shown because that listing is a sale item in woocommerce (so it shows the main price and the discount price). Link to screenshot is below:
https://cncmachines.net/wp-content/uploads/2018/05/Screenshot-Center-Price-Elements.jpg

We would like to find out a way both (or all three) of these elements can be grouped and centered for mobile and desktop.
If any additional info is needed, please don't hesitate to ask.
Thank you for any help you can offer!

Take care,
Matthew

  • Dimitris

    Hello there Matthew,

    hope you're doing good today and thanks for reaching us! :slight_smile:

    I inspected the HTML markup and I can see that there's no wrapper for price and add-to-cart form (button) and this makes things harder. Also keeping some consistency between different viewports can also be tricky, I was able to get couple of workarounds for you though.

    1.

    .woocommerce div.product p.price {
      margin-left: 17%;
    }
    
    @media screen and (max-width: 770px) {
      .woocommerce div.product p.price {
        margin-left: 31%;
      }
    }
    
    @media screen and (max-width: 480px) {
      .woocommerce div.product p.price {
        margin-left: 25%;
      }
    }

    As you can see, we need to set different margins per viewport width.

    2.

    .summary.entry-summary {
      text-align: center;
    }
    
    p.price {
      display: inline-block;
      top: -34px;
      position: relative;
      border-bottom: 1px solid #D3D3D3;
      padding-bottom: 6px;
      padding-right: 12px;
      margin-right: 0;
    }
    
    form.cart {
      display: inline-block;
    }

    Again, some fine tuning should be made for smaller screens using this workaround, as top-botton margins and paddings are getting messed.

    3.
    The most safe solution would be to have price in one row and add-to-cart button right after it, all centred to product title (that's the only workaround that's safe for all viewports).

    .woocommerce div.product form.cart {
      clear: both;
      display: grid;
    }
    .woocommerce div.product p.price {
      width: 100%;
      text-align: center;
    }

    Hope that was some help!
    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.