Display product shortcode

  • Resolved meijin2k

    (@meijin2k)


    3 years, 10 months ago

    Is there a way to center the results of the show product shortcode in a post instead of having it left justified?

    [show_products product="xxx"]

    It works, but I would like to have it centered on the page. I did a quick search through the topics here and did not find anything.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author ndre

    (@ndre)

    3 years, 10 months ago

    Hi @meijin2k,

    If your theme doesn’t have such an option, it will require custom CSS.

    Would you please provide a URL so I can help?

    Thread Starter meijin2k

    (@meijin2k)

    3 years, 10 months ago

    Thanks for the response.

    You can find the link here to check out:

    Link to page

    • This reply was modified 3 years, 10 months ago by meijin2k.
    Plugin Author ndre

    (@ndre)

    3 years, 10 months ago

    Hi @meijin2k,

    Thank you for the URL. Would you please set it to show only one item per row?

    Thread Starter meijin2k

    (@meijin2k)

    3 years, 10 months ago

    So I added the per_row=1 parameter to the shortcode and that made the single product show as wide as the page….which is too large. I liked the small size it showed without the parameter (but left justified).

    So in looking at your docs, it seemed like this should have done the trick (put it in the additional CSS section)?

    .per-row-1 .modern-grid-element {
max-width: 400px;
margin: 1% auto;
float: none;
}

    That got me more to the size that would work, but now it is right justified and cuts off the right side edge of the product box.

    So I am obviously getting something wrong, just not sure what. But it is very close now.

    Thank you for the help.

    Plugin Author ndre

    (@ndre)

    3 years, 10 months ago

    Hi @meijin2k,

    Yes, you got it right, but there is another CSS that still overrides your custom CSS. Please add the following instead:

    .product-list.per-row-1 .modern-grid-element {
    max-width: 400px;
    margin: 1% auto;
    float: none;
}
    Thread Starter meijin2k

    (@meijin2k)

    3 years, 10 months ago

    Bingo! Thank you! That did the trick!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Display product shortcode’ is closed to new replies.