skip to Main Content

My site onlinevending.com – a WordPress page with woocommerce – I have some custom code on the single product pages that seems to work fine on the desktop view. However – when you look at the mobile view – certain things like the quantity button and product add ons seem to double up.

Here is an example: https://onlinevending.com/product/southern-beaver-bulk-vending-machine/

I am trying to figure out what the previous developer did to make this happen. Here is the code snippet:

<script>
     

jQuery( document ).ready(function($) {
      $( ".product-subtitle" ).insertAfter( ".product_title" );
      $( ".single_add_to_cart_button" ).after( "<br/><br/>" );
      $( "li.additional_information_tab" ).removeClass( "active" )
      $('li.description_tab>a[href="#tab-description"]').trigger('click');
      $('h2:first-child:contains("You may also like…")').remove();
      $( ".sku_wrapper" ).after( $( ".woocommerce-Price-amount:first" ) );
      $('h2:contains("Optional Accessories …")').text("You may also like ..."); 
      $( ".quantity" ).prepend( $( ".product_meta " ) );
      $( ".product_meta" ).insertAfter( ".single_add_to_cart_button" );
      $( ".quantity" ).insertBefore( ".single_add_to_cart_button" );
   

 $(function() {
    if ( document.location.href.indexOf('?s=') > -1 ) {
        $('h1:contains("Options")').remove();
    }
});

$( "<h3>Optional Accessories</h3>" ).insertBefore( ".upsell-style:first-child" ); 
 
 if ($("input[name='upsells[]']").length) {
    $('ul>h3').show();
 } else {
   $('ul>h3').hide();  
 }
  
 
  if ($("#upsell_3132").length) {
    $('.upsell-style , h3').hide();
    //$('.clear+.quantity .text').css('display','none');
  }
  
  
  $( "h3:contains('SELECT SHIPPING ACCESSORIAL OPTIONS')").css('display','block');
  $( "h3:contains('PRODUCT OPTIONS & SHIPPING ACCESSORIAL OPTIONS')").css('display','block');
  
  
  
    
$( "h2:contains('You may also like ...')" ).insertBefore( "ul.products>li:first-child" );

$( "div.woocommerce>form:nth-child(4)" ).insertAfter( "input#billing_wcj_checkout_field_1" );




});



</script>

And here is the content-single-product.php added to the theme


/**
 * The template for displaying product content in the single-product.php template
 *
 * Override this template by copying it to yourtheme/woocommerce/content-single-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     3.7.0
 */
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<?php
    /**
     * woocommerce_before_single_product hook
     *
     * @hooked woocommerce_show_messages - 10
     */
     do_action( 'woocommerce_before_single_product' );
?>

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php
        /**
         * woocommerce_show_product_images hook
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>

    <div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

        <?php global $product, $woocommerce, $woocommerce_loop; ?>

        <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data"> 


            <?php do_action('woocommerce_before_add_to_cart_button'); ?>

            <?php
            if ( ! $product->is_sold_individually() )
                woocommerce_quantity_input( array(
                    'min_value' => apply_filters( 'woocommerce_quantity_input_min', 1, $product ),
                    'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->backorders_allowed() ? '' : $product->get_stock_quantity(), $product )
                ) );
            ?>

            <hr class="clear" />

            <?php
            
            $upsells = $product->get_upsells();
            
            //if ( sizeof( $upsells ) == 0 ) return;
            $meta_query = $woocommerce->query->get_meta_query();
            $args = array(
              'post_type'           => 'product',
              'ignore_sticky_posts' => 1,
              'no_found_rows'       => 1,
              'posts_per_page'      => $posts_per_page,
              'orderby'             => $orderby,
              'post__in'            => $upsells,
              'post__not_in'        => array( $product->id ),
              'meta_query'          => $meta_query

            );
            

            $query = new WP_Query( $args );
            if ( $query->have_posts() ): ?>
                <ul style="padding-left: 0px;">
                    <? $upsell_num = 0; ?>
                <?php while ( $query->have_posts() ): $query->the_post(); ?>
                    <label for="upsell_<?php the_ID(); ?>" class="upsell-style">

                      <? //echo wc_get_product( $upsells[$upsell_num++] )->get_price();
                      ob_start();
                      the_ID();
                      $remembered_id = ob_get_contents();
                      ob_end_clean();
                      ?>

                      <input type="checkbox" name="upsells[]" id="upsell_<?php the_ID(); ?>" value="<?php the_ID(); ?>" />
                      <?php the_title(); ?>
                      $<? echo wc_get_product( $remembered_id )->get_price(); echo " (SKU# "; echo wc_get_product( $remembered_id )->get_sku(); echo ")"; ?> </label>
            
                <?php endwhile;  ?>
                </ul>
                
            <?php endif; ?>

            <?php wp_reset_postdata(); ?>

            <button type="submit" class="single_add_to_cart_button button alt"><?php echo apply_filters('single_add_to_cart_text', __( 'Add to cart', 'woocommerce' ), $product->product_type); ?></button>
        </form>

        </div><!-- .summary -->

    <?php
        /**
         * woocommerce_after_single_product_summary hook
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_output_related_products - 20
         */
        do_action( 'woocommerce_after_single_product_summary' );
    ?>

</div><!-- #product-<?php the_ID(); ?> -->

<?php do_action( 'woocommerce_after_single_product' ); ?>

HERE is what it looks like – you can see it is doubling a bunch of things like the quantity and add to cart button.
enter image description here

2

Answers


  1. You are adding Quantity and product meta two times using jQuery. if you want to correct it then you need to correct your jQuery code or you can correct it with css with correct media query. you should do it display none using media query with change the min width.

    https://prnt.sc/15edgxf
    https://prnt.sc/15edk50

    Login or Signup to reply.
  2. You should add this css

    in css file:

    @media only screen and (max-width: 767px)
        .alt+ div.product_meta,
        ul+ .quantity .text {
            display: none !important;
        }
    }
    

    and if you are not able to open css file then you can add this css in your template or your working php file

    <style type="text/css">
    @media only screen and (max-width: 767px)
        .alt+ div.product_meta,
        ul+ .quantity .text {
            display: none !important;
        }
    }
    </style>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search