I love Kadence and AI codes but I’m no expert and omg I’m exhausted…

  • Hi and thank you for this great help you guys share in this community, I’ll contribute when I know how to

    I have already tried several CSS and PHP codes, both from online and from Windows Copilot, some things work, most don’t, tried searching this forum with keywords but other ppls issues differ here and there from mine, tried the suggested code to them but nothing

    So I’m trying to modify a few things mostly related to the product catalog view of items in the grid, I’m sorry I’m going to try to ask all things in the same post but if you can help me with just one it’s fine, it’s great, tyvm in advance, I’ll put them in descending priority:

    1. When hovering over an item in the catalog, the “add to cart” appears from the bottom of the product but the text is all caps, takes two lines (it’s in spanish “A?ADIR AL CARRITO” with “CARRITO” in the 2nd line) and the vertical spacing between the two lines is TOO TALL, the whole box looks “bugged” or broken, specially in the Customizer where text lines overlap one another
    View post on imgur.com
    View post on imgur.com

    2. I would like to change the vertical spacing in multiple things in the product catalog boxes:
    – Between product image and title
    – Between Title and regular price
    – (When hovering) between discounted price and “Add to cart”
    – SPECIALLY THIS ONE: Between the two lines of add to cart “A?ADIR AL CARRITO”
    – Between CARRITO and the end of the box

    3. I’ve noticed some snippets work only in the default Customizer Additional CSS and some only inside a snippets plugin, I use WPCode in particular, why? Honestly I’d prefer to not have to use a plugin for snippets, for ex this code works in WPCode but not in AdditionalCSS:

    /* Add random sorting */
add_filter('woocommerce_get_catalog_ordering_args', 'custom_woocommerce_get_catalog_ordering_args');
function custom_woocommerce_get_catalog_ordering_args($args) {
	$orderby_value = isset($_GET['orderby']) ? wc_clean($_GET['orderby']) : apply_filters('woocommerce_default_catalog_orderby', get_option('woocommerce_default_catalog_orderby'));
	if ('random_list' == $orderby_value) {
		$args['orderby'] = 'rand';
		$args['order'] = '';
		$args['meta_key'] = '';
	}
	return $args;
}

add_filter('woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby');
add_filter('woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby');
function custom_woocommerce_catalog_orderby($sortby) {
	$sortby['random_list'] = 'Orden Aleatorio';
	return $sortby;
}

    but for example these work only in Additional CSS and NOT in WPCode:

    /* Turn off zoom in product page */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

/* Hide number of products in each category in categories list block */
.wc-block-product-categories-list-item-count {
    display: none;
}

    I have already tried clearing cache with “WP Fastest Cache”, as well as CTRL + F5 form incognito window, even closing and reopening

    Thank you SOOOOO MUUUUUUCH for all help, I’ve really just invested too much time in this. I’m starting a 3 months full stack development basic course on July 2 but until then… I don’t think I’m asking for all that much, or am I? All opinions are welcome too, thanks

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Bastian Suivera

    (@marioscomco)

    Note, the first code, the one for random order in catalog, actually used to work from the Additional CSS customizer but idk what I changed and it doesn’t anymore, now it only works from the WPCodes plugin. I haven’t changed the theme or any other major changes, oh well, I think I used to have a different snippets app called Code Snippets, now I changed it for this WPCodes which I think is better

    Oh btw, I just found out the 3rd code, the one about hiding categories total item count, is not necessary, I just found the block’s properties allows to remove item count, so I removed the custom code and used the block editing tool

    Thread Starter Bastian Suivera

    (@marioscomco)

    So I just found out that the random sorting code works by adding it to the functions.php file but, why? I mean, it used to work from the Additional CSS tool, why the change?

    Hi, Bastian!

    I’d be happy to help you with these.

    1. There are options to change the line height values of each product’s title and price. Go to Dashboard > Appearance > Customizer > WooCommerce > Product Catalog > DESIGN tab.

      Here’s a screencast – https://share.zight.com/RBuA4XeN

    2. Changing the line height values should affect their vertical spacing. For the space between the image and title, you can add this additional CSS (Customize > Additional CSS):

      .woocommerce ul.products li.product .entry-content-wrap { padding: 0rem 1rem 1.5rem }

      For the spacing between “carrito” when hovered:
      .woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-action-wrap { bottom: -1.5rem; }

      For the line spacing of your add to cart texts:
      .woocommerce ul.products:not(.woo-archive-btn-button) li:where(:not(.woo-archive-btn-button) ) .button:not(.kb-button) { display: block; }

      Here’s a screenshot of how it should look – https://share.zight.com/Wnu8BEJw
    3. CSS and PHP are different from each other. The CSS codes will work when you add them to Customize > Additional CSS.

      On the other hand, the code snippet with the “add_filter” functions are PHP code snippets. To safely add them to your website, better to use a plugin like WPCode, as PHP is a server-side script. It’s not a code that can be run by the browser like how they do with CSS.

      We have a tutorial here – https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

    I hope this helps. Let me know if I can help you further.

    Regards,
    Karla

    Thread Starter Bastian Suivera

    (@marioscomco)

    Hi Karla thank yooooouuuuuu ???, omg this has been a ride but I feel great about learning and being more capable every day, tyvm! My catalog is looking great!
    I wanted to mention it’s also bc I found this visual CSS editor YellowPencil and OMG it has made things so much easier, I wish I knew about this before.

    Well, yes, despite the visual CSS editor I’m still struggling a bit with the catalog item boxes size and the space between them. This is how they look by default:

    View post on imgur.com

    But I want to make better use of space, make pictures bigger by increasing the size of the boxes (BUT ONLY FOR DESKTOP VIEW bec Mobile looks fine, any bigger would break it) so I used this code:

    /*Catalog item's height, width*/
@media (min-width: 1200px) {
    #main .woo-archive-btn-button li {
        height: 260px;
        width: 190px;
    }
}

    And now it looks even better

    View post on imgur.com

    specially horizontally, but vertically there is still too much “blank” space between rows, idk how to reduce this space. PS: I don’t what the item boxes to be longer in the bottom, I think they’re just perfect

    Thankyouuuuuuuuu ??????

    Hello @marioscomco

    You can use CSS to adjust the row gap for grid items like the product loop. For example, try the following CSS and let us know if it works for you. The CSS targets the loop and changes the row gap to 10px. Adjust the gap as you see fit.

    ul.products.content-wrap.product-archive.woo-archive-loop {
    row-gap: 10px;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.