Woocommerce Section

  2. Home
  4. Woocommerce Section
  6. Customize Your Shop Page

Customize Your Shop Page

Customizing Shop

Shop Page

Configure the appearance of shop page and its elements within Appearance > Customize > WooCommerce > Shop.

Shop Page Layout

Upscale features 6 different layouts for the shop page. You can choose the layout you prefer to showcase your products in the Layout section.

In this section you can also customize the number of columns to display for each device, how many product to display per page, show/hide product star rating, and product info to display.

Shop Page Pagination

Upscale has 4 styles of pagination for the shop page: number pagination, number-ajax pagination, infinite load with button, and infinite load scroll.

Hover Animation Setting

You can choose the animation to use when you hover on the product photos. There are 4 options of image hover animation to select.


Page Title Layout

You can display the title of your shop page in 4 variations in each shop page section.

  • Shop Homepage Title: Choose the page title variation for shop homepage
  • Category Page Title: Choose the page title variation for shop page based on category (e.g. Tops)
  • Brand Page Title: Choose the page title variation for shop page based on product brand

Display Elements

Product Attributes

You can show or hide product attributes from the Attributes Swatches section. Product attributes you can show are color and size.

Product Badge

For product badge, scroll down to the Badge section to configure the badge layout.

  • To change the badge display of recent products, select the available options in the badge field. You can choose to display the badge in NEW text or your own text by selecting the custom badge.
  • To change the badge display of sale products, select the available options in the sale field. You can choose to display the badge in SALE text or the amount of the discount.
  • NONE option means you disable the badge display.

NOTE: Grouped product can only use the SALE text badge for sale products.

Custom HTML Code

To add HTML code in your shop homepage, scroll down to Shop Homepage section then input the code in the available box.