View Categories

Mastering Product Table Design in WooCommerce with JustTable

1 min read

Creating a visually appealing and user-friendly product table is crucial for the success of your WooCommerce store. JustTables offers a comprehensive set of styling options that allow you to customize your product table according to your brand and design preferences. Below, we’ll explore various design elements you can control using JustTables:

Table Design
Table Design

General Style #

  1. Font Family: JustTables gives you the option to choose between using the font from your active theme or setting a custom default font for your product table.
  2. Pre-Loading Icon Color: You can change the color of the preloader icon that appears while your table loads, ensuring it complements your overall design.
Table General Design
Table General Design

Wrapper Style #

  1. Background Color: Customize the background color of the table wrapper to match your website’s design theme.
  2. Border Width, Style, and Color: Define the border properties of the table wrapper, allowing for precise control over the look and feel.
  3. Border Radius: Adjust the rounded corners of the table wrapper to achieve the desired look.
  4. Padding and Margin: Set the spacing around the table to create the ideal alignment within your webpage layout.
Table Wrapper Design
Table Wrapper Design

Filter Style #

  1. Background Color: Customize the background color of the table filters to match your website’s design theme.
  2. Border Width, Style, and Color: Define the border properties of the table filter, allowing for precise control over the look and feel.
  3. Border Radius: Adjust the rounded corners of the table filters to achieve the desired look.
  4. Padding and Margin: Adjust the spacing around the table to achieve optimal alignment within your webpage layout.
Table Filter Design
Table Filter Design

Table Style #

Modify the overall style of the product table to match your website’s design. You can control various aspects, including background color, border properties, padding, and margin.

Table Area Design
Table Area Design

Header Style #

In the Header section, you can modify the style of the table header. This includes customizing fonts, colors, background, and border properties.

Table Header
Table Header

Body Style #

Define a distinctive style for the table body with customizable features such as background and text colors, accent and hover colors, borders, responsive column dividers, padding, and text alignment, ensuring a visually engaging presentation.

Table Body Design
Table Body Design

Pagination Style #

Customize the pagination elements’ style to ensure that they blend seamlessly with your overall design.

Table Pagination Design
Table Pagination Design

Export & Print Style #

JustTables provides options for styling the appearance of export and print buttons, ensuring they are consistent with the look and feel of your website.

Table Export & Print Buttons Design
Table Export & Print Buttons Design
What are your Feelings
Scroll to Top