Woocommerce Question posted in
The official Woocommerce documentation can be found here.

jQuery to PHP: Add a selector class to children elements if more than one – Woocommerce

Is it possible to implement the same thing than the jQuery code below in PHP?

I use it to hide errors made during importing products from wholesaler.

Here is the jQuery code I use:

jQuery(document).ready(function( $ ){
    $('.woocommerce-product-details__short-description:has(p:nth-of-type(2)) p').addClass('ukryj-klase-krotki');
});

How does it work:

jQuery checks if in product short description is more than one <p> element. If there is more – it adds class ‘ukryj-klase-krotki’ to all <p> elements. Then I add CSS class to hide first <p> element generated in product short description so the only one I want is visible:

CSS code:

.woocommerce-product-details__short-description .ukryj-klase-krotki{
    display: none;
}

.woocommerce-product-details__short-description .ukryj-klase-krotki ~ .ukryj-klase-krotki{
    display: block;
}

Any help?

Tags:

2

Answers


  1. 0

    If you want to install a plugin to add the script look here: https://it.wordpress.org/plugins/search/header+and+footer+scripts/.

    If you want to use PHP code instead you need to add the following code inside the functions.php file of your active theme (if I use it in the child theme):

    // add custom class
add_action( 'wp_footer', 'add_custom_class' );
function add_custom_class() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('.woocommerce-product-details__short-description:has(p:nth-of-type(2)) p').addClass('ukryj-klase-krotki');
        });
    </script>
    <?php
}

    As suggested by the comments above you should fix the problem, as soon as possible, by changing the incorrect product data.

    Login or Signup to reply.
  2. 0

    First read Template structure & Overriding templates via a theme to understand how you can override WooCommerce template files via your active child theme.

    The template to be overridden is single-product/short-description.php

    Once copied to your chid theme in "woocommerce" folder > "single-product" subfolder, open/edit short-description.php file, and replace with:

    <?php
/**
 * Single product short description
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/short-description.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerceTemplates
 * @version 3.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

global $post;

$short_description = apply_filters( 'woocommerce_short_description', $post->post_excerpt );

if ( ! $short_description ) {
    return;
} 

if ( $short_description && substr_count($short_description, '</p>') > 1 ) {
    $short_description = str_replace( ['<p class="', '<p>'], ['<p class="ukryj-klase-krotki ', '<p class="ukryj-klase-krotki">'], $short_description );
}

?>
<div class="woocommerce-product-details__short-description<?php echo $class; ?>">
    <?php echo $short_description; // WPCS: XSS ok. ?>
</div>

    Here, using substr_count() php function, we count the number of </p> (closing tags) from product short description, to add ukryj-klase-krotki as class selector to all <p> children tags using str_replace() function. Tested and works.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search