Search code examples
phphtmljquerywordpressslick.js

Slick slider in WordPress is generating random <p> tags PHP

I have a slick slider which pulls through WooCommerce product images in WordPress. I have created a shortcode for this function however it seems to randomly add <p tags between images which causes a blank spot within the carousel slider. Does anyone know what could be happening?

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

I have tried using these two filters above doesnt seem to change anything.

function product_images_slick_carousel_shortcode() {
ob_start(); ?>

<div class="product-images">
    <?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();

    if ($attachment_ids) {
        foreach ($attachment_ids as $attachment_id) {
            $image_url = wp_get_attachment_url($attachment_id);
            if ($image_url) {
                echo '<div><img src="' . esc_url($image_url) . '"></div>';
            }
        }
        } else {
            $thumbnail_id = get_post_thumbnail_id($product->get_id());
            $thumbnail_url = wp_get_attachment_url($thumbnail_id);
            if ($thumbnail_url) {
                echo '<div><img src="' . esc_url($thumbnail_url) . '"></div>';
            }
        }

    ?>
</div>

<script>
    jQuery(document).ready(function ($) {
        $('.product-images').slick({
            // Slick carousel options
            autoplay: true,
            autoplaySpeed: 4000,
            arrows: true,
            slidesToShow: 4,
            slidesToScroll: 1
            // Add more options as needed
        });
    });
</script>

<?php
return ob_get_clean();
 }

add_shortcode('product_images_slick_carousel', 'product_images_slick_carousel_shortcode');

enter image description here

Solution

  • One way to solve is to figure out why your remove_filter commands aren't working, as this is clearly root cause.

    Another way to solve this is as follows:

    <script>
    jQuery(document).ready(function ($) {
        $('.product-images p').remove();
        $('.product-images').slick({
            // Slick carousel options
            autoplay: true,
            autoplaySpeed: 4000,
            arrows: true,
            slidesToShow: 4,
            slidesToScroll: 1
            // Add more options as needed
        });
    });
</script>