Building your website with WordPress and WooCommerce allows you to fully own your store and use a flexible framework to build systems and designs as unique as you dream.
Today we will discuss setting up a WooCommerce store page and how it should be customized.
What is a WooCommerce Store Page?
The WooCommerce store page is included by default and is an archive page of the product page type. This means that it will display all the products published for visitors to scroll through. It is essentially your online showroom where visitors can view your catalog. Products can be displayed individually, or by category, or both by category and by product on a single page.
Why build custom WooCommerce store pages?
The default WooCommerce store page is a good choice for many stores to help you get up and running quickly. But customizing this page gives buyersDelivering a curated experience, thus bringing you more sales and a more streamlined shopping experience for your customers.
1. Make shopping fast and easy
The faster visitors can find what they want and get the information they need to shop with confidence, the better. A well-organized store keeps shoppers from feeling overwhelmed.
There is also the option for shoppers to get a direct quote from the "storeThey also added a content section to the "Shop" page to promote their personalization options. They also added a content section to the "Shop" page to promote their personalization options.
2. Provide an experience tailored to your product and audience
For new and unfamiliar items - or product categories where shoppers need detailed information such as food ingredients or accessory specifications - it may be desirable to display the information directly on the store page.
Here are some examples of how to modify your store page based on the products or audiences you sell:
- Add filters to sift through large catalogs or very granular items. Maybe you sell replacement parts and shoppers need to find them based on their size, color, SKU, etc.
- If the item for sale is more visually appealing, pleaseFocus on the pictures. For example, a clothing store may want to display larger photos or allow people to scroll through a rotating gallery of images directly on the store page.
- Displaying products in a table. If the item being sold doesn't rely on visuals, it may be necessary to not use images at all. Instead of using a more traditional product grid, use tables to display key information. This is a particularly good setup for service-based businesses or wholesale stores where customers add a large number of items to their carts at once.
- Include product-specific badges. For example, if you sell food products, you might have a "vegan" or "nut-free" badge. This helps shoppers immediately see which products meet their needs (and which don't).
3. Highlighting specialty products and promotions
Editing your WooCommerce store page allows you to capture your customers' attention and direct their interest to featured products and categories, promotional offers, and content such as free shipping or satisfaction guarantees.
In this case, the block theme really shines. Use the "Most Rated Products" block to showcase the best of the best, the "Specials" block to highlight discounted options, or the "Featured Products" block to have a section that section that can be quickly changed depending on the season, current events, or other circumstances.
4. Reflect your brand and personality
Customizing your store page can help you stand out from your competitors, present a uniform look across your website and other company materials, and build confidence by displaying reviews and other trust symbols.
Asterisks have been added below each product to show how well they have been rated. There's also a clever little marker on the left side that curious shoppers can click on to read more reviews to ease any hesitation they might have.
How to Customize Your WooCommerce Store Page
1. Customize your store pages with WooCommerce Customizer
The WooCommerce section of the customizer includes store notifications, product catalogs, product images and checkout tabs. This is the easiest way to make basic changes to your store pages.
switch toAppearance → Customize → WooCommerceThe
Customizing WooCommerce Store Notifications
Store notifications are displayed in an overlay bar at the very bottom of the site (some themes may have it at the top). This bar is displayed throughout the site with the option to turn it off. This feature is a great way to keep visitors informed about current promotions, featured product categories, upcoming events, or store-wide policies such as free shipping on orders over a certain amount.
Store Notification TabThere is a field for you to enter text and HTML tags for formatting and linking. Click the Enable Store Notifications checkbox to activate the feature.
Customizing the WooCommerce Product Catalog
The Product Catalog tab has drop-down menus for managing all aspects of your store and product category pages.
If you have a large number of items in your store, a single store page may leave visitors wondering how to choose. Use the Store Page Display menu to select what should be displayed on the page - categories, products, or both. The Category option will display a thumbnail grid representing the categories available in the store.
Use the default product sorting menu to manage the display of items on the store page. The default is Custom Sort + Name, but it can be sorted as follows:
- Popularity (sales)
- Average rating
- nearest
- Price (ascending order)
- Price (descending order)
To set a custom order for the default options, go to theProducts → All Products. Then, click the Sort tab at the top. Next, select Category, Product Type, Inventory Status, or any combination of the three. Click "screening".
Customizing WooCommerce Store Page Product Images
The "Product Images" tab allows you to customize the size and display of product images on store pages. There are three options:
- 1:1 (cut to square)
- Customized Aspect Ratio
- Uncropped (displayed using the aspect ratio of the uploaded image)
When you publish changes, a thumbnail of the new image size is automatically generated.
2. Customize your store page with the Gutenberg block editor
If you are using a block theme, you can edit and customize the WooCommerce store page using the site editor. Be sure to back up your WordPress site before editing the store page template.
To customize your page, go toexterior condition → editor (software), then select Browse All Templates from the drop-down menu at the top center of the page. Click Editable Catalog Templates.
A product catalog template consists of header, footer and body areas. Click on a header or footer area to edit its content and add new blocks, such as image or paragraph blocks, as needed.
By default, the main body of the page contains only the product grid block, which will display the product image, title, price, etc.
Add blocks above and below the product grid blocks to customize your store page templates. Any block type can be used, including more than 20 WooCommerce blocks located in a dedicated section of the block inserter for easy navigation.
Use"Best Sellers"and"Top Rated ProductsUse the "All Reviews" block to promote your most popular items. Use the "All Reviews" block to add customer testimonials to your page.
Customized Product Display Options
It is possible to edit "All Products" block to further customize your WooCommerce store pages. Click the block and then click "compiler" icon. To manage its settings, you can click on elements in the sample product - such as the product image and product title.
It is possible to rearrange the contents of the items displayed in the grid. For example, it is possible to set the "Add to cart" button is moved above the product ratings. Click to select an element and then use the up/down arrows to move its position in the layout.
3. Customize your store pages with WooCommerce extensions
Extensions are types of plugins created specifically for WooCommerce stores. They can be used to improve the shopping experience and enhance the content and functionality of store pages. We will present a few examples.
Product Filters for WooCommerce
Use WooCommerce's product filters to allow customers to filter your products based on multiple criteria, including category, price, average rating, and stock status. Filters make catalogs containing thousands of products easy to access because shoppers can use them to get relevant results quickly and easily. The extension uses AJAX to update the results without requiring the visitor to refresh the page.
WooCommerce Quick Look
WooCommerce Quick View lets your shoppers learn more about products, choose between versions, and add items to their cart without leaving the main store page. The extension adds a "Quick View" button to your store page, which triggers a pop-up window when clicked. The window contains the necessary product information, as well as the ability to select variants and add items to the cart. This speeds up the shopping experience as visitors can compare products and make selections without having to load multiple new pages.
WooCommerce Advanced Product Labeling
WooCommerce Advanced Product Labels add visual flair to your store pages to grab your customers' attention. You can create custom labels to showcase new products, promotional items, best sellers, and more. Labels can be applied globally, to specific products, or to a group of items based on conditions.
WooCommerce Product List
WooCommerce's Product Table lets you display your catalog in a tabular format for easy reference and comparison on a single page. The column headings are customizable and you can choose the default sort order. The extension supports variable products with drop-down menus to select variants. Each row has an Add to Cart button and a checkbox to add multiple products to the cart at once. Shoppers can use the fields at the top of the form to filter results by category and price range. They can also filter by variant attributes such as size or color. Filtering is done via AJAX, so it's quick and doesn't require a page refresh.
4. Customize your store page manually (using code and hooks)
Hooks allow customizing templates (e.g. store pages) without taking any risks associated with editing core files.WooCommerce uses the template file archive-product.php for store pages. This can be found in the WooCommerce Actions and Filter HooksFind a list of available hooks on the Reference page.
Always back up your website before making any changes. Even a single error when modifying your website's code can lead to serious problems.Jetpack VaultPress Backup is a great option because it will save your site every time you make a change.
Do not edit plugin files directly, because future updates will overwrite your work. Need to add your custom code to the child theme's functions.php file, or use the Code Snippets Plugins like that.
Some of the following customizations can be made to the store page using hooks and codes:
Hide store page result counts and default sorting dropdowns
These page elements are handy for shoppers, but not very useful for stores with only a few items. Add this code to hide them from your store pages.
// Hide the shop page result countremove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 ); // Hide the shop page default sorting menu remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 ); // Hide the shop page default.
It is also possible to hide these elements using CSS code. Go toAppearance → Customize → Additional CSS and add the following code:
.woocommerce-result-count {
display: none;
}
.woocommerce-ordering select {
display: none; }
}Changing the number of products per row on the Store page
Use this code to override the default number of products per row. Setting a higher number increases the number of products that can be seen on the page without scrolling. Setting a lower number will display the image of each product larger for a more detailed view.
In this example, set the quantity to two items per line:
// Change the number of products per row on the shop page
add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
function loop_columns() {
return 2; // 2 products per row
}
}Move the product title above the product image on the store page
Use this code to move your product titles from below to above each row of product images. This layout change gives you a design option that will allow you to stand out from the rest of the store and place your titles higher up on the page so shoppers don't have to scroll to see them.
// Move the product title above the product image
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_title', 10 );
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );Make your prices stand out
Make your prices stand out in the eyes of shoppers by adding the following code to an additional CSS field in the customizer. This style change is useful if the price point is important to your customers. In this example, the price is displayed in bold and set to blue.
.wc-block-grid__product {
font-weight: bold; color: blue; product {
color: blue.
}Add some color to the product image border
This code will add colored borders to your product images. Here the border width is set to 2pxThe color isorange (color)The
.wc-block-grid__products .wc-block-grid__product-image img {
border: 2px solid #f27c21;
}reach a verdict
Provide your customers with a better shopping experience, increase sales opportunities, and highlight your brand's personality by customizing your WooCommerce store pages. Whether you use the WooCommerce Customizer, the Gutenberg Block Editor, extensions, or manual code, there are multiple ways to tweak and optimize for your specific needs and skill level. Keeping these tips and techniques in mind can create an online store page that is both beautiful and powerful, paving the way for your business success.
