The "Add To Cart" form is not displaying correctly

[Andi]

When “Add to Cart” is clicked, the form pops up, but the font is too big and each field does not have its own defined space. So the description, the price, and the total are smushed together. There was no problem with the appearance of the “Add to Cart” form the first time I installed PhotoSeller. I uninstalled and reinstalled PhotoSeller due to some other issues and everything seems to be working just fine now except the form. The form actually functions correctly, but the appearance is not as it should be. How can I fix this?

[mbrsolution]

Hello Andi can you provide a link for us to check.

Kind regards

[Andi]

yes, here you go…

[deleted URL after investigation]

thanks!

[Peter]

Looks like your theme is squashing things up a little.

You can clean this up by inserting some custom css.

Do the following:

1) Go and grab the following plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

2) Then add the following CSS code in the settings of the above plugin:

.wps_digital_details_table{

width: 650px;

margin: 0 0 1.71429rem;

}



.wps_digital_details_table td {

text-align: center;

}

[Andi]

Peter – as usual, your advice solved the problem. The form looks perfect now. Thanks!

[Andi]

Hi – I installed a fresh copy of the PhotoSeller plugin today to fix the problem with the Continue Shopping button (ok-fixed) and now I am seeing a problem that I saw last year – the Add to Cart form on the Photo Details page is squashed. I am using a price list with three offerings. After installing the fresh copy of Photoseller plugin today, the following problem started: if people want to buy a photo, they can only see the first and third offering, but the second one is squashed.

digital (social media) – visible –

print (4×6) – not visible –

print (8×12) – visible –

It is possible to select the second offering and add it to the cart, but you can’t see the description. I tried a workaround by using a price list with two offerings, but the problem still occurred – only one of the offerings was visible, the other one was squashed. If I use a price list with only one offering then there’s no problem.

The CSS code that Peter gave me last year to fix the problem still resides on my site, but is not fixing the problem this time around.

My website is deltasportsmag.com – could you please check one of the Photo Details pages in the “Basketball 2015” photo album? I will keep the three-offering price list on the basketball album so you can see the problem. But I am going to change my other albums to a one-offering price list so that my customers don’t see the squashed one.

Thanks in advance for your help…!

[Peter]

Add the following custom CSS code to fix the white background of the second (and every even) row:

.wps_digital_details_table .wps_tr_even {

background: none !important;

}

[Andi]

Hi Peter – Thank you! That solved the issue on the Photo Details page. But now as I go further into the checkout process, I see that the same problem appears on the Shopping Cart page and the Checkout page. I am hoping that you have a bit of code that will fix those two pages…?

Thanks!

[Peter]

Hi,

I’ll need the link again please.

[Peter]

I see that the same problem appears on the Shopping Cart page and the Checkout page

Can you please tell me exactly which parts of the shopping/checkout page you are referring to?

[Andi]

When I add two or more items to my cart, and then I click “view cart” I can only see the description of the items in the odd lines not the even lines of the form. See below. I had this problem with the form on the photo details page and you gave me some code that fixed the photo details page. Can you give me some code to fix this problem on the shopping cart page as well as the checkout page? Thanks!

Selection #1 – visible

Selection #2 – not visible

Selection # 3 – visible

Selection # 4 – not visible.

[Peter]

This code should work:

#viewCartTable tr.pure-table-odd td {

background: none !important;

}

[Andi]

Thanks Peter – yes – it worked! Thank you!

[Andi]

You may have seen that I just submitted an issue on a different topic – my watermark is not behaving the way it used to before I installed the fresh copy of photoseller. Hope you can work your magic on that issue as well.

[Author]

Posts