Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them:

.home .woocommerce ul.products li:last-of-type {
  display: none;
}

However, this method only hides the last category and not the second to last. Is there a CSS selector like "last-of-type minus one" that can be used?

I am starting to think that utilizing WordPress hooks may be a better approach than relying solely on CSS.

If you have any suggestions or insights, they would be greatly appreciated. Thank you!

csswordpresswoocommercecategories

Answer №1

If you want to hide the second to last child element, you can utilize the nth-last-child() pseudo-class.

The :nth-last-child(n) selector targets elements that are the nth child from the end of their parent, regardless of their type.

Here is an example implementation:

.content .items-list ul li:nth-last-child(-n+2) {
  visibility: hidden;
}

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

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

Issue with Angular 6: Animation with LESS is failing to work post deployment

Hello everyone, I'm facing an issue with my LESS animation. When I deploy my app on the server after using ng build --prod, the CSS animations are not visible in browsers. They work perfectly fine on localhost but fail to work after deployment and I c ...

cssangulartypescriptlesswebdeploy

Turn off hover functionality for mobile and tablet devices

Is there a way to prevent hover effects on mobile and tablet devices for an SVG file used in the img tag? scss file: .menu-link:hover { img { filter: invert(40%) sepia(90%) saturate(2460%) hue-rotate(204deg) brightness(93%) contrast(93%); } .side ...

csssvgsasshovermedia-queries

The Intersection Observer fails to function properly with images

I recently discovered that images require different intersection observer code than text in order to function properly. After making the necessary changes to the code, my intersection observer is behaving quite oddly. As I scroll down, the image stays hidd ...

javascripthtmlcss

Django - The entity that encompasses multiple categories and subcategories

I've been grappling with a concept for this project. I'm working on creating a comprehensive directory of companies within the music industry. We currently have a database of 500 companies, sorted into categories such as Audio, Video, Lighting, S ...

djangodjango-modelscategories

Display a section of the picture at maximum width

Can anyone help with displaying only a portion of an image at full width (100%) without any overflow issues? The code I've tried is not working: .intro_sea { position: absolute; width: 101%; clip-path: inset(30% 50% 0 0); margin: 0; paddi ...

htmlcss

I want to display a div above an image when hovering over it

.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...

jquerycss

Adjusting image size by adding padding to accommodate larger screens using Bootstrap 4

I have incorporated Bootstrap into my server-side web application to resize images for larger screens by adding padding to prevent them from getting too big. However, I'm unsure if this is the best approach. Are there better methods for resizing image ...

cssbootstrap-4

Closing the space between navigation bar choices

I'm currently working on my website's navbar menu and struggling to eliminate the gap between each of the navbar links. It seems that the li attributes with the class dropdown are slightly wider than the rest of the links, causing this issue. I&a ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Set the height of the main div container to a fixed size

I am facing an issue with my div container (mapInfo-Container) which contains multiple div blocks. I want the container to have a fixed height of 250px, and be scrollable for any content exceeding this height. Here is the code snippet: http://jsfiddle.net ...

css

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...

javascriptjqueryhtmlcss

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

htmlcssasp.net

The CSS of the Sendgrid template is being overlooked

I have utilized Sendgrid to create the template mentioned below: In order to send this template using my Node server, I have developed the module provided in the code snippet: /* * Created by root on 6/6/16. */ var path = require('path'), ...

csssendgridemail-templates

Automatically collapse the responsive menu upon selecting a menu item

I have implemented a custom JavaScript code for a basic open/close menu movement on multi-page websites. The code works by closing the menu only when the user clicks the menu symbol. However, I now need to incorporate this code into a one-page website and ...

javascriptjqueryhtmlcssresponsive-design

Tips for equalizing the height of inner DIVs within a container

Similar Question: How to maximize a floating div? Showing my HTML setup below: <div id="container"> <div id="sidebar"> left <br /><br /><br /><br /><br /><br /> ...

htmlcss

Looking to design a unique PHP page for a WordPress website without a theme directory

I'm still learning about WordPress, so please bear with me if I ask any simple questions. Currently, I have a WordPress website built using a page builder without utilizing theme templates from the theme folder. Additionally, I have another project th ...

phpwordpress

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

javascriptjqueryhtmlcss