Shaun Williams

Also just noticed, that the Add Gift Wrapping for button (with no model), is using WooCommerce default colours and not using the themes styling. It also breaks the update totals button when recalculating shipping.

Just for reference, I have notified the theme developers, Getbowtied, as well, just in case its how they are doing things.

Their response so far, was that it hasn’t been tested with that plugin yet.

Wasn’t aware I can put screen shots in here. Will have to work that one out.

I can’t “show” you exactly, it’s a live site, and due to this bug (which, understand I have no clue if its a problem with the plugin directly or with the theme), I have to turn off the plugin to make the layout work again.

Here is the offending bit of code,
Gift Wrapper Disabled:

<form action="https://oranamodels.com/cart/" method="post">

<table class="shop_table shop_table_responsive cart" cellspacing="0">
	<thead>
		<tr>
			<th class="product-remove">&nbsp;</th>
			<th class="product-thumbnail">&nbsp;</th>
			<th class="product-name">Product</th>
			<th class="product-price">Price</th>
			<th class="product-quantity">Quantity</th>
			<th class="product-subtotal">Total</th>
		</tr>
	</thead>
	<tbody>
		
						<tr class="cart_item">

					<td class="product-remove">
						<a href="https://oranamodels.com/cart/?remove_item=931af583573227f0220bc568c65ce104&_wpnonce=8afa13e56b" class="remove" title="Remove this item" data-product_id="2108" data-product_sku="89110">×</a>					</td>

					<td class="product-thumbnail">
						<a href="https://oranamodels.com/shop/car-manufacturers/ford/ford-sierra-rs500-2/"><img width="114" height="76" src="https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-114x76.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-114x76.jpg 114w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-150x100.jpg 150w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-300x199.jpg 300w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-190x126.jpg 190w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-510x339.jpg 510w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0.jpg 580w" sizes="(max-width: 114px) 100vw, 114px"></a>					</td>

					<td class="product-name" data-title="Product">
						<a href="https://oranamodels.com/shop/car-manufacturers/ford/ford-sierra-rs500-2/">Ford Sierra RS500</a>					</td>

					<td class="product-price" data-title="Price">
						<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>260.00</span>					</td>

					<td class="product-quantity" data-title="Quantity">
						<div class="quantity">
	<input type="number" step="1" min="0" max="4" name="cart[931af583573227f0220bc568c65ce104][qty]" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
</div>
					</td>

					<td class="product-subtotal" data-title="Total">
						<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>260.00</span>					</td>
				</tr>
						<tr>
			<td colspan="6" class="actions">

									<div class="coupon">

						<label for="coupon_code">Coupon:</label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code"> <input type="submit" class="button" name="apply_coupon" value="Apply Coupon">

											</div>
				
				<input type="submit" class="button" name="update_cart" value="Update Basket" disabled="">

				
				<input type="hidden" id="_wpnonce" name="_wpnonce" value="8afa13e56b"><input type="hidden" name="_wp_http_referer" value="/cart/">			</td>
		</tr>

			</tbody>
</table>

</form>

<div class="cart-collaterals">

	<div class="cart_totals calculated_shipping">

	
	<h2>Basket Totals</h2>

	<table cellspacing="0" class="shop_table shop_table_responsive">

		<tbody><tr class="cart-subtotal">
			<th>Subtotal</th>
			<td data-title="Subtotal"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>260.00</span></td>
		</tr>

		
		
			
			<tr class="shipping">
	<th>Shipping</th>
	<td data-title="Shipping">
					<ul id="shipping_method">
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_australia_postaus_parcel_regular" value="australia_post:AUS_PARCEL_REGULAR" class="shipping_method">
								<label for="shipping_method_0_australia_postaus_parcel_regular">Regular Post: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>27.56</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_australia_postaus_parcel_express" value="australia_post:AUS_PARCEL_EXPRESS" class="shipping_method" checked="checked">
								<label for="shipping_method_0_australia_postaus_parcel_express">Express Post: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>35.48</span></label>					</li>
							</ul>
		
		
					

<form class="woocommerce-shipping-calculator" action="https://oranamodels.com/cart/" method="post">

	<p><a href="#" class="shipping-calculator-button">Calculate Shipping</a></p>

	<section class="shipping-calculator-form" style="display:none;">

		<p class="form-row form-row-wide" id="calc_shipping_country_field">
			<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state" rel="calc_shipping_state">
				<option value="">Select a country…</option>
				<option value="AU" selected="selected">Australia</option>			</select>
		</p>

		<p class="form-row form-row-wide validate-required" id="calc_shipping_state_field">
			<span>
						<select name="calc_shipping_state" id="calc_shipping_state" placeholder="State / county"><option value="">Select an option…</option><option value="ACT">Australian Capital Territory</option><option value="NSW">New South Wales</option><option value="NT">Northern Territory</option><option value="QLD">Queensland</option><option value="SA">South Australia</option><option value="TAS">Tasmania</option><option value="VIC">Victoria</option><option value="WA">Western Australia</option></select>
					</span>		</p>

		
		
			<p class="form-row form-row-wide validate-required" id="calc_shipping_postcode_field">
				<input type="text" class="input-text" value="6000" placeholder="Postcode / ZIP" name="calc_shipping_postcode" id="calc_shipping_postcode">
			</p>

		
		<p><button type="submit" name="calc_shipping" value="1" class="button">Update Totals</button></p>

		<input type="hidden" id="_wpnonce" name="_wpnonce" value="8afa13e56b"><input type="hidden" name="_wp_http_referer" value="/cart/">	</section>
</form>

			</td>
</tr>

			
		
		
		
		
		<tr class="order-total">
			<th>Total</th>
			<td data-title="Total"><strong><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>295.48</span></strong> <small class="includes_tax">(includes <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>26.86</span> Tax)</small></td>
		</tr>

		
	</tbody></table>

	<div class="wc-proceed-to-checkout">
		
<a href="https://oranamodels.com/checkout/" class="checkout-button button alt wc-forward">
	Proceed to Checkout</a>
	</div>

	
</div>

</div>

Gift Wrapper Enabled:

<form action="https://oranamodels.com/cart/" method="post">

<table class="shop_table shop_table_responsive cart" cellspacing="0">
	<thead>
		<tr>
			<th class="product-remove">&nbsp;</th>
			<th class="product-thumbnail">&nbsp;</th>
			<th class="product-name">Product</th>
			<th class="product-price">Price</th>
			<th class="product-quantity">Quantity</th>
			<th class="product-subtotal">Total</th>
		</tr>
	</thead>
	<tbody>
		
						<tr class="cart_item">

					<td class="product-remove">
						<a href="https://oranamodels.com/cart/?remove_item=931af583573227f0220bc568c65ce104&_wpnonce=8afa13e56b" class="remove" title="Remove this item" data-product_id="2108" data-product_sku="89110">×</a>					</td>

					<td class="product-thumbnail">
						<a href="https://oranamodels.com/shop/car-manufacturers/ford/ford-sierra-rs500-2/"><img width="114" height="76" src="https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-114x76.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-114x76.jpg 114w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-150x100.jpg 150w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-300x199.jpg 300w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-190x126.jpg 190w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0-510x339.jpg 510w, https://oranamodels.com/wp-content/uploads/sites/4/2017/02/A89110_01_0.jpg 580w" sizes="(max-width: 114px) 100vw, 114px"></a>					</td>

					<td class="product-name" data-title="Product">
						<a href="https://oranamodels.com/shop/car-manufacturers/ford/ford-sierra-rs500-2/">Ford Sierra RS500</a>					</td>

					<td class="product-price" data-title="Price">
						<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>260.00</span>					</td>

					<td class="product-quantity" data-title="Quantity">
						<div class="quantity">
	<input type="number" step="1" min="0" max="4" name="cart[931af583573227f0220bc568c65ce104][qty]" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
</div>
					</td>

					<td class="product-subtotal" data-title="Total">
						<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>260.00</span>					</td>
				</tr>
						<tr>
			<td colspan="6" class="actions">

									<div class="coupon">

						<label for="coupon_code">Coupon:</label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code"> <input type="submit" class="button" name="apply_coupon" value="Apply Coupon">

						
			<div id="wc-giftwrap" class="wc-giftwrap">

			 
						<div class="giftwrap_header_wrapper">
							<p class="giftwrap_header"><a data-toggle="modal" data-target="#giftwrap_modal" class="btn" aria-label="Add gift wrapping?">Add gift wrapping?</a></p>
						</div>
						<div id="giftwrap_modal" class="giftwrap_products_modal modal" role="dialog">
					 		<div class="modal-dialog" role="document">
 								<div class="modal-content">
 									<div class="modal-header">
 										<button class="button close giftwrap_cancel fusion-button fusion-button-default" type="button" data-dismiss="modal" aria-label="Cancel"><span aria-hidden="true">Cancel</span></button>
									</div><!-- /.modal-header -->
									<div class="modal-body">
										
										
																							<ul class="giftwrap_ul">
													<li class="giftwrap_li"><input type="radio" name="giftwrapproduct" id="giftwrapping–adultbirthday(male)" value="1745" aria-label="Gift Wrapping - Adult Birthday (Male)"><label for="giftwrapping–adultbirthday(male)" class="giftwrap_desc"><span class="giftwrap_title"> Gift Wrapping - Adult Birthday (Male)</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>5.00</span> <small class="woocommerce-price-suffix">inc. GST</small></label></li><li class="giftwrap_li"><input type="radio" name="giftwrapproduct" id="giftwrapping–adultbirthday(female)" value="1744" aria-label="Gift Wrapping - Adult Birthday (Female)"><label for="giftwrapping–adultbirthday(female)" class="giftwrap_desc"><span class="giftwrap_title"> Gift Wrapping - Adult Birthday (Female)</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>5.00</span> <small class="woocommerce-price-suffix">inc. GST</small></label></li><li class="giftwrap_li"><input type="radio" name="giftwrapproduct" id="giftwrapping–childbirthday(female)" value="1737" aria-label="Gift Wrapping - Child Birthday (Female)"><label for="giftwrapping–childbirthday(female)" class="giftwrap_desc"><span class="giftwrap_title"> Gift Wrapping - Child Birthday (Female)</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>5.00</span> <small class="woocommerce-price-suffix">inc. GST</small></label></li><li class="giftwrap_li"><input type="radio" name="giftwrapproduct" id="giftwrapping–childbirthday(male)" value="1736" aria-label="Gift Wrapping - Child Birthday (Male)"><label for="giftwrapping–childbirthday(male)" class="giftwrap_desc"><span class="giftwrap_title"> Gift Wrapping - Child Birthday (Male)</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>5.00</span> <small class="woocommerce-price-suffix">inc. GST</small></label></li><li class="giftwrap_li"><input type="radio" name="giftwrapproduct" id="giftwrapping–christmas" value="851" aria-label="Gift Wrapping - Christmas"><label for="giftwrapping–christmas" class="giftwrap_desc"><span class="giftwrap_title"> Gift Wrapping - Christmas</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>5.00</span> <small class="woocommerce-price-suffix">inc. GST</small></label></li>													</ul>
																					<div class="wc_giftwrap_notes_container">
											<label for="wc_gift_wrap_notes">Add Gift Wrap Message:</label>											<textarea name="wc_gift_wrap_notes" id="wc_gift_wrap_notes" cols="30" rows="4" maxlength="1000" class="wc_giftwrap_notes"></textarea>	
										</div>
										</div><!-- /.modal-body -->
										<div class="modal-footer">
											<button type="submit" class="button btn alt giftwrap_submit fusion-button fusion-button-default" name="giftwrap_btn" aria-label="Add Gift Wrapping to Order">Add Gift Wrapping to Order</button> 
										
										</div><!-- /.modal-footer -->
	 								</div><!-- /.modal-content -->
 								</div><!-- /.modal-dialog -->
							</div><!-- /.modal -->
				
			</div><!-- /.wc-giftwrap -->		
		
							</div>
				
				<input type="submit" class="button" name="update_cart" value="Update Basket" disabled="">

				
				<input type="hidden" id="_wpnonce" name="_wpnonce" value="8afa13e56b"><input type="hidden" name="_wp_http_referer" value="/cart/">			</td>
		</tr>

			</tbody>
</table>

<div class="cart-collaterals">

	<div class="cart_totals calculated_shipping">

	
	<h2>Basket Totals</h2>

	<table cellspacing="0" class="shop_table shop_table_responsive">

		<tbody><tr class="cart-subtotal">
			<th>Subtotal</th>
			<td data-title="Subtotal"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>260.00</span></td>
		</tr>

		
		
			
			<tr class="shipping">
	<th>Shipping</th>
	<td data-title="Shipping">
					<ul id="shipping_method">
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_australia_postaus_parcel_regular" value="australia_post:AUS_PARCEL_REGULAR" class="shipping_method">
								<label for="shipping_method_0_australia_postaus_parcel_regular">Regular Post: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>27.56</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_australia_postaus_parcel_express" value="australia_post:AUS_PARCEL_EXPRESS" class="shipping_method" checked="checked">
								<label for="shipping_method_0_australia_postaus_parcel_express">Express Post: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>35.48</span></label>					</li>
							</ul>
		
		
					

<form class="woocommerce-shipping-calculator" action="https://oranamodels.com/cart/" method="post">

	<p><a href="#" class="shipping-calculator-button">Calculate Shipping</a></p>

	<section class="shipping-calculator-form" style="display:none;">

		<p class="form-row form-row-wide" id="calc_shipping_country_field">
			<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state" rel="calc_shipping_state">
				<option value="">Select a country…</option>
				<option value="AU" selected="selected">Australia</option>			</select>
		</p>

		<p class="form-row form-row-wide validate-required" id="calc_shipping_state_field">
			<span>
						<select name="calc_shipping_state" id="calc_shipping_state" placeholder="State / county"><option value="">Select an option…</option><option value="ACT">Australian Capital Territory</option><option value="NSW">New South Wales</option><option value="NT">Northern Territory</option><option value="QLD">Queensland</option><option value="SA">South Australia</option><option value="TAS">Tasmania</option><option value="VIC">Victoria</option><option value="WA">Western Australia</option></select>
					</span>		</p>

		
		
			<p class="form-row form-row-wide validate-required" id="calc_shipping_postcode_field">
				<input type="text" class="input-text" value="6000" placeholder="Postcode / ZIP" name="calc_shipping_postcode" id="calc_shipping_postcode">
			</p>

		
		<p><button type="submit" name="calc_shipping" value="1" class="button">Update Totals</button></p>

		<input type="hidden" id="_wpnonce" name="_wpnonce" value="8afa13e56b"><input type="hidden" name="_wp_http_referer" value="/cart/">	</section>
</form>

			</td>
</tr>

			
		
		
		
		
		<tr class="order-total">
			<th>Total</th>
			<td data-title="Total"><strong><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>295.48</span></strong> <small class="includes_tax">(includes <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>26.86</span> Tax)</small></td>
		</tr>

		
	</tbody></table>

	<div class="wc-proceed-to-checkout">
		
<a href="https://oranamodels.com/checkout/" class="checkout-button button alt wc-forward">
	Proceed to Checkout</a>
	</div>

	
</div>

</div>

</form>

The offending part is the DIV: cart_collaterals. Without the plugin, it falls outside the proceeding <form>, after enabling the plugin for some reason it ends up being within the <form> which then breaks the layout. In chrome dev tools, if I manually move the div back to after the </form> tag, all is good again.

The plugin isn’t on, but I know you can past the code in to see what it does to the layout and what I am talking about. Go here: https://oranamodels.com/cart/ make sure you put something in the cart too. You should have cart items on left and basket totals on right, with your plugin the basket totals gets moved to below even thou the items section never changed width.

If I can work out where to put screenshots I let you know.

Great, so not only can’t I work out how to put in a screenshot, seems my posts won’t go up when I have the code in it.

I don’t know if my reply went up.

I gave a very detailed reply, but not showing on my end, yet wordpress says its a duplicate when I try reposting it.

Just submitted the form.

Have tried disabling Autoptimize but made little difference. Made my score worse but load times not much change.

Just some more info.

I don’t know what’s causing it (obviously) as in I can’t see extra load times on resources etc. But while diagnosing my Pingdom speed test on oranamodels.com, I get around 5sec with MontsterInsights turned off.

Turn it back on and I get over 10sec loads.