Missing Add to Cart on some devices

[saucysal]

Thank you Louise for the things that you have pointed out. I shall look into them as soon as the add to cart button problem is fixed, which is somewhat major.

Sarah

[malbro]

Thanks Malcolm. I haven't changed any of that CSS - it is out of box. Do I need to remove the line overflow: hidden; or do I need to replace it with something else?

Sarah

The line overflow operation will depend on the browser, I use firefox with firebug to analyse a site and switching off that item of css in firebug brings the button back on screen so it is clearly the culprit.

As you reduce the width of the screen the buttons disappear because the css believes the button is outside the available area, now the available area depends on what you have added to the page to produce your design, so although this is in the original Sellerdeck code it is changes to the page layout that are causing this to spring into effect.

Personally I cannot see any reason why you would want to put an overflow hidden around the add to cart button, if support want you to wait you will have customers who cannot place orders for products if they happen to fall foul of this problem.

[saucysal]

Sorted

Support came back to me and have fixed it. Amazingly, all the fix was, was to add an invisible border after the overflow: hidden;, but keeping it as overflow: hidden, in the CSS as mentioned earlier by Mal. This put a narrow invisible border around the button, and it now stays puts regardless.

Sarah

[Mike Hughes]

Hi Sarah,

Can you post some more details of the fix in case anyone else has the same problem.

[saucysal]

I cannot find where support accessed the code for the responsive design stylesheet, but he added some code to the end of the code that Malcolm posted on this thread today at 12.05 to add a small invisible border, that is all. If I can find it I will post it here.

Sarah

[Buzby]

Hi Sarah,

I have this exact same problem on my list of things to sort.

If you could post the fix it would be appreciated.

Kind regards

Jason

[saucysal]

Took me a while to find the code. It is in the responsive design stylesheet, and for me was line 667:

form.imageOnLeftTextWrappedAround p.cart-button-placement, form.imageOnRightTextWrappedAround p.cart-button-placement{display:block; overflow:hidden; border:1px solid transparent;}

So the added code was border:1px solid transparent;}

Sarah

[malbro]

Took me a while to find the code. It is in the responsive design stylesheet, and for me was line 667:

Sarah

for me it was line 623 so it varies, I am on version 14.0.1

goto Design Library -> Theme Stylesheets -> Responsive CSS, open it and then search for

form.imageOnLeftTextWrappedAround p.cart-button-placement,

[peblaco]

Fix not working!

Just noticed the same error on a site I had made changes to the Add To Cart button had gone. Thank you Sarah for posting the fix given by SellerDeck support. Unfortunately the fix above is not fully working on all devices. After the fix was applied I checked the CSS had the new code, refreshed and resized a browser window and the Add To Cart button was disappearing. Then I checked on a smart phone to test on a proper mobile device and the Add To Cart button is not showing. This needs another fix.

[peblaco]

On further investigation I noticed this problem occurs when you move the div containing Attributes and Components above the Add To Cart button in the product layout. The original poster had also done that. Some users move the Attributes for increased usability, to make it easier for visitors to see the available choices before clicking to buy.

It can be seen on a default site by moving up the Attributes. When a smaller screen size wraps the Attributes and Add To Cart, the Add to Cart disappears off the screen.

As a secondary issue, because of the responsive CSS media query the Attributes wrap under the product image at certain screen sizes whilst the Add To Cart button stays to the right of the product image, this happens whether the Attributes are above or below the Add To Cart and even if there is enough room for them to the right of the image, it would be better if they stayed in place until necessary to wrap underneath otherwise it looks odd with the choice being wrapped.

Sent the details to SellerDeck Support.

[feemish]

I think most people would want the choice selection above the add to cart button! I was planning on doing that as well. Seems odd that Sellerdeck chose to put choices under the button in the first place.

[brucet]

I had a look at your page, Sarah, and compared it with the usual SellerDeck sample site, which does not manifest the issue. Best guess, it's triggered by the rearrangement of the field order in the product layout, but I can't be certain. I note Malcolm's comment, but I'm not sure why the issue should appear in one arrangement and not the other.

If you would like SellerDeck to provide a fix, please report the issue direct to support so that we can get a copy of your snapshot and examine the layout changes in the original - thanks.

[peblaco]

I'm not sure why the issue should appear in one arrangement and not the other.

I have found what is causing the problem, with thanks to Kieran pointing out the media styles for a different request. There is a Responsive CSS style which floats the Attribute List and pushes the paragraph with Add To Cart off the screen.

The 14.0.1 Responsive CSS style sheet has styles for the paragraph around the Add to Cart and div around Attribute List both set to display block and overflow hidden:
form.imageOnLeftTextWrappedAround p.cart-button-placement, form.imageOnRightTextWrappedAround p.cart-button-placement {display:block; overflow:hidden;}
div[id^="idVars"] .attribute-list {display:block;overflow:hidden;}

However there is a media query for Attribute List if the screen is less than 1350 pixels wide it adds float left and width 100%, that wraps the Attribute List under the product image whilst leaving Add To Cart and other items right of the product image:
@media screen and (max-width:1350px) {
div[id^="idVars"] .attribute-list {float:left; width:100%;}
#idInvoiceAccountAddresses {margin-left:26%;}
#idInvoiceAccountAddresses, #idDeliverAccountAddresses {width:30%;}
}

I expect the float was added to keep the Add To Cart at the top of the screen if there were many Attributes which were wrapped. However looking at other ecommerce sites the options are usually next to or above the Add to Cart to improve usability.

The missing Add To Cart problem occurs when the screen is smaller and the Add To Cart button wraps under the image. Because the Attribute List is floated left and the paragraph containing the Add To Cart has not cleared that float, the paragraph sits to the right of the Attribute List and it pushes the Add To Cart button off the screen so it disappears.

I did a quick test on a default site, moved the Attribute List above Add To Cart and applied a red border to the paragraph tag and noticed a small vertical red line to the side of the Attribute List where it was pushing the paragraph off the screen, you can see the result in the attached screenshot.

A proper fix is needed from SellerDeck Support.

In 14.0.1 a temporary fix is to comment out the line under the CSS media query using /* at the start and */ at the end to hide the CSS style, that stops the float on the Attribute List wrapping and pushing the Add To Cart off the screen which made it disappear.

I also noticed on some screen sizes the Attribute List and Add To Cart wrap under the image when there seems to be enough room for them to remain next to the image and I suggest that is something to be looked at.

See attached screenshot showing problem.

[feemish]

Sellerdeck certainly need to get us a solution to this asap.

Having size choices below the 'add to cart' is illogical and doesnt look right. We need to be able to adjust that.

[peblaco]

It should be mentioned there is a real bug on the default software, not just when moving the Attributes and Components above the Add To Cart. If there are Attributes and there is a Product Link, the Product Link becomes invisible on smaller screens because the float on the Attributes List pushes the Product Link off the screen in the same way as the problem outlined above. That can be resolved by the temporary fix above commenting out the CSS line for the float.

The suggested solution from SellerDeck Support was to add a CSS clear both on the paragraph class but that would wrap the cart button, out of stock, or catalog suspended and any subsequent elements under the product image bottom left of the layout.