Adjusting spacing on product shortcode

  • Resolved snapdragon777

    (@snapdragon777)


    4 years, 7 months ago

    I would like to adjust the spacing between the title of the product and the short description as it appears in the shortcode. At the moment the gap is too large (in my opinion).

    I would also like to include a small bit of whitespace between the image tiles underneath the currently shown image, right now they are all jammed up against each other.

    I might also want to reduce the space between the Add to Cart button and the Reviews tab begins, depending on how the above turns out.

    Is this possible to do with a bit of CSS? It feels like it should be but I’m not sure what selectors to try.

    Lastly (slightly off topic), is there a way to increase the size of the Add to Cart button text, make it allcaps, or something else that makes the function of the button a little more prominent?

    Any help much appreciated!

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @snapdragon777 – the spacing of these images would be caused by your theme and not by WooCommerce core, so you’d best find help for this with your theme developer.

    That said, here’s a quick fix with some custom CSS. Under Customize > Additional CSS, you can add the following code:
    ?

    /* Change spacing of gallery images */
?
.woocommerce div.product div.images .flex-control-thumbs li img {
    padding: 10px 5px 0px;
}

    The result of this is:

    example of working css
    Link to image: https://d.pr/i/fzkj2d
    ?
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Given that this is not WooCommerce core on your site, I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Thread Starter snapdragon777

    (@snapdragon777)

    Thanks for the snippet, that worked! I will look into your other suggestions. Thanks for the help ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adjusting spacing on product shortcode’ is closed to new replies.