Single Product Page Layout (re: different widths)

  • Resolved Editor

    (@aroeditor)


    11 months, 2 weeks ago

    Grateful for any assistance, likely a CSS issue but I can’t figure out which class to call and which attributes to set.

    On my single product page, I would like for the top half of the page where the container is with all the product details, cart, etc., and the sidebar to be boxed, but below the product info, I want the page to be full width, to have images span all the way across.

    Site is not yet live but uploaded a few screenshots here: https://postimg.cc/gallery/nprYMKx

    1. Screenshot 1 is the top half of the page currently boxed with a sticky sidebar
    2. Screenshot 2 is the bottom half of the page but I want that container that has the 3 boxes to span edge to edge.
    3. Screenshot 3 is what I desire the page to look like.

    Not sure if I need to make the entire page full width and change the size of the product container through CSS, but then I can’t have a sidebar correct? And if so, then how do I adjust the product container to only be boxed? Or other options? Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Jonayed (woo-hc)

    (@jonayedhosen)

    11 months, 2 weeks ago

    Hi @aroeditor ,

    Thanks so much for reaching out, and I appreciate you sharing the screenshot — it looks like you’re working on a pretty sleek layout with the product container on the left and the sidebar on the right. That setup’s looking great so far!

    From what I can see, it sounds like you’re aiming to box in just the product container — keeping the content centered with some nice spacing on the sides. That kind of layout tweak usually does require a bit of custom CSS, especially if you’re working outside of a full-width template.

    then how do I adjust the product container to only be boxed? Or other options? 

    Since your site isn’t live yet, I can’t pinpoint the exact CSS class for you. But in general, you’d want to adjust the width and padding of the product container and possibly tweak the layout wrapper around it to get that “boxed” feel.

    That said, just a quick heads-up: our support covers the core WooCommerce plugin, so we’re limited when it comes to helping with custom code or layout changes tied to themes or third-party plugins.

    If you’re looking to take the design further, I’d definitely recommend reaching out to Codeable or a WooExpert, who can help craft something pixel-perfect for your site.

    I hope this helps point you in the right direction

    Plugin Support Feten L. a11n

    (@fetenlakhal)

    11 months, 1 week ago

    Hi there,

    As we haven’t received a response in some time, I’ll mark this ticket as resolved. Please don’t hesitate to reach out if you need further assistance.

    Apart from this, if you’re happy with our plugin and the support you’ve received, we’d really appreciate a review: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/#new-post

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

The topic ‘Single Product Page Layout (re: different widths)’ is closed to new replies.