Place the “add to cart” button along the bottom on caregory/archive pages
Place the “add to cart” button along the bottom on category/archive pages. The current view is not plesant for the eye. This is probably a minor addition to the CSS.
A few lines of CSS did the trick.I must say that using scss/compressed css makes it very difficult to find the right spots (being a beginner).
/*
set fixed height, spacing between rows and border
*/
.site-main ul.products li.product {
height: 380px;
margin-bottom: 40px;
border-color: lightgray;
border-style: solid;
border-width: 1px;
}
/*
position the button along the bottom.
Use the same color as the pagination button
*/
.site-main ul.products li.product .button {
margin-bottom: 0;
position: absolute;
top: 340px;
left: 45px;
background-color: #96588a;
}
/*
Give some margin at the top and bottom
*/
.site-main ul.products li.product img {
display: block;
margin: 4px auto 10px;
}
A few lines of CSS did the trick.I must say that using scss/compressed css makes it very difficult to find the right spots (being a beginner).
/*
set fixed height, spacing between rows and border
*/
.site-main ul.products li.product {
height: 380px;
margin-bottom: 40px;
border-color: lightgray;
border-style: solid;
border-width: 1px;
}
/*
position the button along the bottom.
Use the same color as the pagination button
*/
.site-main ul.products li.product .button {
margin-bottom: 0;
position: absolute;
top: 340px;
left: 45px;
background-color: #96588a;
}
/*
Give some margin at the top and bottom
*/
.site-main ul.products li.product img {
display: block;
margin: 4px auto 10px;
}
Ugly but it works.
TNX Egbert Jan, NL