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

Discover the method to activate the back button feature on ajax pages

I am currently working on a website that is navigated in the following way: $(document).ready(function () { if (!$('#ajax').length) { // Checking if index.html has been loaded. If not, navigate to index.html and load the hash part with ajax. ...

javascriptjqueryajaxbrowser-historyhtml5-history

Uploading files within an update panel in asp.net results in the file getting lost

Whenever I select a value from the dropdown box within my update panel on a page, some text is displayed. I have set triggers for the drop down, but even after doing so, the page still performs a post back when I change the drop down value. What am I doing ...

c#asp.netajaxupdatepanelajaxcontroltoolkit

Start a fresh project using the Teamweek API with jQuery integration

After successfully acquiring the planning details from Teamweek using the API (Get projects from Teamweek in jQuery), I am now looking to feed Teamweek a project. Even though the code below seems to work (based on the response received), I am unable to lo ...

jqueryajaxjson

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Being someone who relies on to-do lists, I implemented a system where you can input tasks into a textbox and click the add button to see them listed below. However, I found it cumbersome to keep clicking the add button every time I wanted to quickly add mu ...

javascripthtmlcss

"Revolutionizing Social Media Interaction with jQuery Ajax Like System

Trying to incorporate Facebook 'like' and 'dislike' functionality using jQuery has been quite a challenge for me. One issue I've encountered is that when the ajax call is made, it triggers a loading animation which persists even af ...

jqueryajaxfacebook

Achieving Content Alignment Using CSS

I successfully implemented a design on my HTML page that divides it into three sections vertically, with each section having a different background color - white, gray, and black. The backgrounds stretch the full width of the page regardless of screen reso ...

css

Getting the Right Value: A Step-by-Step Guide to Setting the Default or Selected Value in

When creating directive form controls (text, select, radio), I am passing a value to the directive function. If this value is not set or empty, then the default value should be taken from the question data._pageAttributes.defaultValue. HTML <div ng-re ...

javascriptjqueryhtmlangularjs

The Google chart fails to render on the screen

I have a scenario where I need to fetch some data using an ajax call and then display a chart upon successful completion of the call. In order to test this functionality, I have set up a default chart with static data for now. However, when I click on the ...

jqueryajaxchartsgoogle-visualization

Semantic UI utilizes floating elements to position them within a

As a beginner with Semantic UI, I have been unable to find any information in the documentation on how to float a simple element without it needing to be nested within another element like a button or a segment. For example, at the bottom of a page, I hav ...

htmlsemantic-ui

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

I'm really struggling with this issue. I have a situation where I need to center a downward pointing arrow within some divs. It should be positioned in the middle, on a brown line, and on top of everything else. The last div should also include the a ...

htmlcsscss-shapes

What is the best way to conceal the border and background color of the dropdown arrow in an HTML <select> tag?

Upon browsing the Mozilla homepage, I noticed a peculiar element in the center - a <select> option with an arrow lacking border and background color. In contrast, when visiting the Facebook sign-up page, the drop-down arrow adheres to the Windows sta ...

csswindowsfirefoxfirefox4

Unable to use saved images with jQuery Slider

I'm currently facing an issue with adding a jQuery slider to my website. It seems that the slider is not displaying images that are saved on my computer, only images from external websites. Below is the code snippet where I have included an image fil ...

jqueryhtmlcss

I can't seem to get the dropdown list to appear. What could be the issue?

I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...

htmlcss

Adjusting Bootstrap 4 Modal Transparency

Currently using Bootstrap 4 Beta and looking to darken the background when a Modal is displayed. I stumbled upon a solution suggesting the addition of a CSS class. .modal-backdrop.in { opacity: 0.5 !important; position: fixed; } The advice was no ...

htmlcssbootstrap-modalbootstrap-4

Getting the CSS for an element's "Active" state using jQuery

Is there a way to retrieve the CSS for the :active state using jQuery? I am looking to create dynamic code so that I don't need to manually adjust the jQuery every time I want to style an element. Edit To clarify, I am trying to avoid using .addClas ...

jquerycss

Tips on utilizing a local file as a background image URL

How can I modify my CSS to link to a local file path like C:\xampp\htdocs\Folder instead of the URL https://source.unsplash.com/1600x1050/?nature. I am currently using Bootstrap 4 and below is my CSS code: .jumbotron{ background: ...

htmlcssbootstrap-4

Waiting for the listener script to finish its task in an Ajax call and then informing the user

I have developed a unique program that allows users to submit test cases from a specific webpage (main.php). The webpage triggers an ajax request to insert user data into MySQL using the file insert.php, with the value done=0. Subsequently, there is a list ...

javascriptphpjquerymysqlajax

Try utilizing the 'id name ends with' parameter within the on() function for creating dynamic bindings

I need help with dynamically binding the change event to multiple select input fields that are generated within my form. The item field is generated with IDs like: id="id_form-0-item" id="id_form-1-item" id="id_form-2-item" ... Although I have attempte ...

javascriptjqueryhtml

JavaScript - The AJAX response is consistently after being undefined

I am encountering an issue with the following functions: function get_non_authorized_bulk_edit_option_values() { var modificable_column_names = get_write_user_values(); alert(modificable_column_names); } The above function is calling this ...

javascriptjqueryajaxreturn

When attempting to utilize res.sendfile, an error arises indicating that the specified path is incorrect

I am facing an issue with my Express.js server and frontend pages. I have three HTML and JS files, and I want to access my homepage at localhost:3000 and then navigate to /register to render the register.html page. However, I am having trouble specifying t ...

javascripthtmlexpressfrontendbackend