Having trouble with the alignment of the product grid on Woocommerce with the Wootique theme?

Hey there, I've been facing an issue with the woocommerce product display grid layout. The items keep getting misaligned, with one on a line and the others right next to each other. I attempted to fix it by adding some custom CSS code:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  min-height: 293px !important;
}

This solution worked temporarily until I installed the YITH AJAX Product Finder plugin, which seemed to revert the changes back to the initial problem. I even tried adjusting the height to see if that would resolve it, but unfortunately, it didn't. Any suggestions or ideas? You can view the product page at this link:

I'm currently using the Wootique theme...

htmlcssajaxwordpresswoocommerce

Answer №1

Alright, I have made some modifications to the CSS code to properly align your product boxes. Please implement the following changes in your CSS file:

style.css - Line 247

ul.products {
   margin-left: 0;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 2px;
   zoom: 1;
   display: initial; /* Added */
}

style.css - Line 251

Remove float: leftand width: 30.75%

custom.css

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    display: inline-block; /* Added */
    vertical-align: top; /* Added */
    width: 30%; /* Added */
}

EDIT - It is recommended to place this code snippet at the end of your custom.css file to prevent it from being overridden by other CSS rules.

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
   min-height: 293px !important;
   display: inline-block;
   vertical-align: top;
   width: 30%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the discrepancy in pixel size between these two web pages on the same device?

I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...

htmlcssresponsive-designpixel

Utilize the dynamic backlash/Werkzeug debugger during an unsuccessful AJAX request on a TurboGears server

TurboGears offers the unique feature of "backlash," an interactive debugger within the browser that is built on the Werkzeug Debugger. When server-side debugging is enabled, in case of a request failure, an interactive web page is displayed where users can ...

jqueryajaxangularjsdebuggingturbogears2

When a 404 error occurs in jQuery ajax, the ajaxStop event is not triggered

Currently utilizing jQuery 1.2.6 (legacy). Within my overall configuration, the following options have been established: jQuery(document).ajaxStart(blockUI).ajaxStop(jQuery.unblockUI); An ajax function is utilized to retrieve a javascript file: functio ...

jqueryajaxhttp-status-code-404

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

cssinternet-explorer

Utilizing jquery.load to fill out a form following unsuccessful validation with ajax in CodeIgniter

After exploring numerous form validation tutorials that utilize jQuery Ajax, I have observed a common trend - they all focus on successful form validation. However, my quest is to uncover the process of displaying errors when server-side validation fails. ...

jqueryajaxcodeignitervalidation

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

JavaScript - Hover function not functioning properly

Having some difficulty with the .hover() function I am fetching dribbble shots that are displayed on page load. However, I am experiencing issues when trying to add a class via hover on these shots. Interestingly, the hover functionality works perfectly ...

jqueryhtml

Material Design Forms in Angular: A Winning Combination

I'm currently working on developing a form using Angular Material. This form allows the user to update their personal information through input fields. I am utilizing "mat-form-field" components for this purpose. However, there are certain fields tha ...

javascripthtmlangularformsangular-material

ASP.NET Framework demonstrating a Basic POST Request

My issue revolves around capturing the Username and Password of a client using a POST request. The code appears straightforward but is not functioning as expected. The LoginController.cs : public class LoginController : ApiController { [HttpPost] ...

c#ajaxasp.net-mvcasp.net-web-api

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

Submitting form data triggers an AJAX request that retrieves and displays the desired content within a

When it comes to opening search results in a specific form on a webpage using Ajax, many developers may face certain challenges. Here is an example of how it can be implemented: <form id="searchForm" method="GET" > <INPUT TYPE="text" N ...

jqueryajaxformsget

Troubleshooting: jQuery $.post not functioning as expected in certain circumstances

I'm currently experimenting with inserting data into a MySQL database using AJAX and jQuery's $.post method. To test this functionality, I have created the following setup: In my index.html file (which already includes jQuery for various other f ...

javascriptphpjquerymysqlajax

Steps for revealing all the information from a database when clicking on the 'Read More' button

I recently set up a database called Magazine, featuring a table named social_media. This table consists of 5 columns: ID, Headline, Author, Content Short, Content. The Content Short column contains condensed versions of the articles which are displayed on ...

phphtmlcss

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. Below is the HTML code snippet: <div class="row menu"> <ul class="nav nav-pills pull-right"& ...

htmlcsstwitter-bootstrap

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

javascriptpythonhtml

JSON parsing error within the HTML Sidebar list

I have a JSON file that contains data I need to parse in order to display information in my sidebar. When a user clicks the button labeled "List all sessions", the goal is to showcase all of the available session details grouped by Session ID and location. ...

javascriptjsonhtml

The functionality of CSS isn't up to snuff on Mozilla Firefox

I am having an issue with CSS styling on a <div> element in my PHP page. The CSS style is working perfectly in Google Chrome, but when I test my code in Firefox, the styling is not being applied. .due-money { background-color: #09C; color: whi ...

phphtmlcssfirefoxcross-browser

Uploading multiple files with unique IDs into a table

Currently, I am attempting to modify the code found at: This code functions perfectly with a single file input (and has been utilized in various projects without any issues). My specific requirement is to generate a table with a file input within each ro ...

javajqueryhtmlspringthymeleaf

Looking for a way to identify when a DOM element is resized as a result of web fonts loading asynchronously?

Within this div element lies text styled with a custom font via CSS's @font-face attribute. The issue arises when the font hasn't loaded yet, causing a delay in updating the font style of the text within the div. As a result, taking measurements ...

javascripthtmlcss

Tips for modifying the value and refreshing the array

I retrieve data from $scope.roleinfo = {"QA":[{"White Box Testing":0},{"Black Box Testing":0}],"Development":[{"Server Side":0},{"UI":0},{"Back end":0}]}; Then, I present these values in a table. Now, I need to update the maxcount and create an array w ...

htmlangularjs