Woocommerce Sidebar

  • Resolved virtualbird

    (@virtualbird)


    7 years, 2 months ago

    Hi,
    We love this theme and have made lots of customisations.
    The one thing that we can’t get right is the pagination on the Woocommerce archive pages.
    It appears at the top of the product loop as opposed to below because of the sidebar.
    In an ideal world we’d like the sidebar to stay exactly as it is, but have the pagination below the shop loop.
    The section of code causing problems is: 

    @media screen and (min-width: 800px) {
.woocommerce .products ul, .woocommerce ul.products {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
    clear: both;
    float: left;
    width: 850px;
	} }

    If you remove the float:left, the sidebar goes below the content but the pagination goes to the position we’d like it to be in.

    Hope this can be fixed!
    Thank you so much for a great theme!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Are you wanting the sidebar widgets to be below the products and the product grid to be 100% width, or are you wanting the sidebar to be on the right?

    Thread Starter virtualbird

    (@virtualbird)

    Hi @sacredpath I’m wanting the sidebar to be on the right – as it is currently. But with the pagination at the bottom rather than the top.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Thanks for the clarification. Replace the 800px media query you have with the following.

    @media screen and (min-width: 800px) {
    .woocommerce ul.products {
        float: left;
        max-width: 850px;
	}
    .woocommerce nav.woocommerce-pagination ul {
        display: block;
        height: 30px;
        border-right: 1px solid #d3ced2;
    }
    .woocommerce nav.woocommerce-pagination {
        max-width: 850px;
        width: 100%;
        text-align: center;
    }
    .woocommerce #content #container {
        max-width: 850px;
        width: 100%;
        display: inline-block;
    }
    .woocommerce nav.woocommerce-pagination ul li {
        float: none;
    }
}
    Thread Starter virtualbird

    (@virtualbird)

    I didn’t get notified about this! Thank you so much, all sorted ??

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    You are welcome.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Woocommerce Sidebar’ is closed to new replies.