Styling the WooCommerce Shop Layout

Now that the elements are added to the template, you can customize the style. With WOO GRID you can edit the style for the following elements:

1. Product item templates: this is the container that defines the single item in the grid.
2. Rows: rows are full-width div’s that hold the columns. For example, if you want to display 2 buttons on the same line, then you’ll have a row with 2 columns and in each column, you’ll have a button
3. Columns: Columns are used to hold the elements inside.
4. Elements: WooCommerce products elements like title, price, description etc.

1. Customize the Product Item Template Style

To open the Product Item Settings modal, click on the gear icon on the top right corner. The following styles can be edited: Margin, Padding, Background Color, Border, Box Shadow, Transition and Content Align. You can see the changes in real time by clicking on the Previe button.

2. Customize the Row Style

To open the Row Settings modal, click on the gear icon on the top right corner. The following styles can be edited: Margin, Padding, Background Color, Border, Box Shadow, Transition and Content Align. You can see the changes in real time by clicking on the Preview button.

3. Customize the Column Style

To open the Column Settings modal, click on the gear icon on the top right corner. The following styles can be edited: Margin, Padding, Background Color, Border, Box Shadow, Transition and Content Align. You can see the changes in real time by clicking on the Previewbutton.

4. Customize the Element Style

To open the Element Settings modal, click on the gear icon on the right. The following styles can be edited: Font, Margin, Padding, Background Color, Border, Box Shadow, Transition and Content Align. For the buttons, there is also an option to add an icon. You can see the changes in real time by clicking on the Preview button.