Taxonomy show dot on product

  • Hello folks, i’m pretty new here and please excuse me if i’m not posting on the right forum, and excuses for my bad english.
    Let me try to explain what i’m looking for:

    For my website i need the function you can see on the following url. You can see on the top left 6 coloured dots Where you can sort a product category with. Or are these Taxonomy?

    Anyway; there are 6 differents Taxonomy and each product is showing the coloured dot on the product image. For example take a look here:https://www.medik8.nl/producten/product-type/cleanse.html example taxonomy

    How can i get this done on my wordpress website? The example is done in magento but i assume it is possible too in wordpress?
    Any help is much much appreciated!

    • This topic was modified 4 years, 11 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)

  • Let’s take the Green dot in the menu for example. That menu item has the class of “blemish” and that class in the CSS is:

    .blemish {
    background-color: #7B997A;
}

    So first thing you can do is add your class and color of choice to your CSS. Then go to Appearance > Menus and add that class to the respective menu item. See: https://www.lockedownseo.com/add-css-classes-to-menu-items-in-wordpress/

    So I have no idea what your site is doing but let’s say you can then make a category called “blemish” and then tag a post in that category. The in your loop you could make you div (let’s say you’re wanting those dots) and give that div a class of the category. So now the div has a category of “blemish” and “blemish” has a background color.

    Make sense?

    It’s kind of vague but without particulars, it’s how you “can” do it.

    Thread Starter bastings

    (@bastings)

    Thanks for responding! Much appreciated!
    I do understand the first part of what you are saying. Next part will figure out but then i stil have no colored dot on each product image….??

    In your loop for each one you could do like:

    <div>
<img>
<div class="dot <?php echo $category; ?>"></div>
</div>

    You might have more than one category for each post but somewhere in there would be your “blemish” category. You could make a meta box and prefill it checkboxes for each post with say blemishes, whatever, etc.. or use Advanced Custom Fields to so it for you, then you could call:
    <div class="dot <?php echo $whatever-your-field-is-called; ?>"></div>

    lots of different ways but all depends on your site.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Taxonomy show dot on product’ is closed to new replies.

Tags