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.
2
Answers
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
You should add this css
in css file:
and if you are not able to open css file then you can add this css in your template or your working php file