Corbett Enders

Try this code in your child theme functions file:

add_filter( ‘storefront_product_categories_args’, ‘w3guy_storefront_product_categories’, 199 );

function w3guy_storefront_product_categories( $args ) {
$args[‘limit’] = 5;
$args[‘columns’] = 5;

return $args;
}

( taken from: https://w3guy.com/customizing-woocommerce-storefront-child-themes/ )

You’ll need to go through the steps of setting up a child theme. Many web sites explain the process, this one is at the top of the google search: https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

Once you have a child theme function.php file set up, that is where you’ll place the code I’ve given you.

There may be some freely available plugins to accomplish your desires, though I don’t know of any.

Adjust “24” to be whatever you desire.

/*********************
* Display up to 24 products per page
/*********************/
add_filter( ‘loop_shop_per_page’, create_function( ‘$cols’, ‘return 24;’ ), 20 );

You may also want to change the # of products per row… use the following for that:

/*********************
* Override theme default specification for product # per row
/*********************/
add_filter(‘loop_shop_columns’, ‘loop_columns’, 999);
function loop_columns() {
return 4; // 4 products per row
}

Sandeep, to center the box try this:

.woocommerce-active .site-header .site-search {
float: none;
margin: 0 auto;
width: 70%;
}
(remove the width line if you don’t want to control the width of the box)

You can use a jquery command in your child theme function file to override the search placeholder text. There might be another way of doing this, but this works for now.

function replace_search_placeholder_text() { ?>
<script type=”text/javascript”>
jQuery( document ).ready(function() {
jQuery(‘#woocommerce-product-search-field’).attr(‘placeholder’,’Search’);
});
</script>
<?php }
add_action( ‘wp_footer’, ‘replace_search_placeholder_text’ );

To reduce the field height try the following:

input#woocommerce-product-search-field {
padding: 1em 1em 1em 3.7em;
}

This will cause the field to shrink but then you need to position the magnifying glass with this code:

.site-search .widget_product_search form:before {
top: 1.1em;
}

This is the custom CSS to use in the child theme:

li.product {
background-color: rgba(243,243,243,1);
padding: 5px;
border-radius: 3px;
}

adjust the background color by changing the entry after the color. You could use “background-color: white;” if that is what you are looking for.

I then also added the following to remove extra padding below the button within the border:

ul.products li.product .button {
margin-bottom:0px;
}

Finally, I reduce the spacing between the rows with this set of code:

ul.products li.product {
margin-bottom:20px;
}

A border around the product image itself or a border/background around the image, text, and button? Check https://wooddepot.ca for an example of the second.

• This reply was modified 8 years, 3 months ago by Corbett Enders.

Daltonien, of you are not using a child theme that is where you need to begin. https://www.pootlepress.com/shop/free-blank-woothemes-storefront-child-theme/

Once you have that set up, then the code I gave you goes into the child theme CSS file.

If you are getting 3 on a row, then 2 on the next, then 3 and then 2 it is because your width is messed up and at max it can show 3. The page is too narrow to show 5 so it is forced the 5 to be on 2 lines.

You’ll need to use smaller thumbnails to get 5 to fit on one row.

I used the following CSS on my site child theme to get each product smaller so I could fit 4 on each row. Change the percentage to find the right fit for your site.

.site-main ul.products li.product {
width: 23.5% !important;;
margin-right: 1.5% !important;
}

You should open a new thread for your new question. Otherwise people may not see it.

Add this code to your CHILD THEME FUNCTIONS file to remove the sorting dropdown.
/*********************
* remove default sorting dropdown in StoreFront Theme
/*********************/
add_action(‘init’,’remove_sorting’);

function remove_sorting() {
remove_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_catalog_ordering’, 10 );
remove_action(‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’,30);
}

Are you using a child theme or editing the main functions.php? You should always use a child theme for your changes because any time this theme gets an update, your changes to the main file will be lost. Please look up “WordPress Child theme” for instructions on how to do this or someone posted a generic Storefront child theme somewhere that you can upload and activate.

I don’t see that class on the page any more so try this one:

div.content-area { margin-top:-16px !important;}

BTW, if you have tried other code that didn’t work make sure you remove it.

No problem.

My replies are somewhat out of order… lol… That small gap is a bit of a stumper… I can’t see it being added but we can negate it by negatively setting the top marging. Try this to remove the small gap:

.page-template-template-homepage-php .content-area { margin-top:-16px !important;}

I don’t have the Poodle Pro extension, so I’m not sure what that interface looks like.

Change it to this:

.site-header { margin-bottom: 0px !important; }

Also, if you want to remove the small gap that remains try:

.page-template-template-homepage-php .content-area { margin-top:-16px;}