[cdbehrleParticipant]

Hi all, hope you are having a good holiday season!
I have been trying to figure out how to change the color and placement of the pagenation at the bottom of my woocommerce pages, I have tries several suggestions I found here on the forum, but none have done anything.

This is my shop: https://carladawnbehrlenyc.com/made-to-order/
1)I would like to consistently center the pagination.
2)I would like to make it easier to see. (Change the background of the little numbers to a grey in it’s regular state instead of white at the very least- I can’t quite tell what is going one there!)

Right now the numbers of the next page(s) blends into my white background and becomes invisible.
and on first page its at right side (first screenshot) and 2nd page(2nd screenshot) it’s appears centered (?)

Thanks for your help!

[FriechModerator]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.woocommerce-page .x-pagination {
	clear: both;
	margin-top: 0;
}
.woocommerce-page .x-pagination a {background-color: #4c4c4c;}
.woocommerce-page .x-pagination a:hover {background-color: #000;}

Make sure you clear your caching plugins before previewing the site, because it is keeping a minified version of your CSS.

Hope it helps, Cheers!

[cdbehrleParticipant]

Thank you that did the trick! My next question, which applies here and to a section I would like to add on my front page- How to reduce height of sections?

I tried adding a section on my ront page above my footer- which then has a row and a container – O wanted full width, black ground, but I would like it narrow – all I want to do is place a message and a logo for a new payment gateway I am using.

I found no way to change the height of all three Items together – I did manage to change section height leaving me with a 60px band of black background and then a big white gap underneath.

Much like the big white gap hat now appears under my products above the pagination.
My other option would be to add this into the footer area- but I can’t see how to, either via a footer widget or in the current footer.

Basically I would just like to make the footer appear wider – still black – and be able to place the logo and a short message about the payment option now available in white above the current footer menu.

Knowing how to control the full section height including the row & column would be helpful in any case!

[FriechModerator]

Hi There,

You could add a property max-height to the section to limits its height. Yes, the footer widget would be more appropriate if you need this section to show on all pages. Please navigate to Customizer > Footer and set the Footer Widget Areas.

Then navigate to Appearance > Widgets and there you’ll see the Footer sidebars for you to placed some widgets on it, add a text widget and paste your logos and the short message on it.

You can add this on your custom css to remove the default padding on the widget area

footer.x-colophon.top {padding: 0;}

Hope it helps, Cheers!

[Author]

Posts