Checkout layout issue with product add ons…

[MarieWorks]

Hi,

We are using the product adds ons plugin from woo themes to allow customers to order personalised mugs.

In testing we have noticed that the formating and alignment of the options they put in to be quite irregular in the checkout summary box on the checkout page (see screen shot )

This also seems to be an issue with standard variable products (see crack mug example above personalised midori mug in screenshot).

As the variable products function is built into woocommerce – we were wondering if this was a theme issue not a plugin issue?

Any advice appreciated.

kind Regards,

Chris

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce td.product-name dl.variation dd{
float:left !important;
padding-top:4px !important;
}

Thanks
Mohammad

[MarieWorks]

Hi Mohammad,

Thanks for this – pretty much done the job – but the collumn in which product information is being displayed seems to be unnecessarily thin?
(see attached screen shot)

Is it possible to widen it ?

Thanks

Chris

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce td.product-name dl.variation{
width:270px !important;
}

Thanks
Mohammad

[MarieWorks]

perfect – thank you Mohammad.
🙂

[Mohammad – SUPPORT]

Hi,
You most welcome.
Thanks
Mohammad

[MarieWorks]

Hi Mohammad,

Sorry to bother you again, i have a similar question about the shipping selection column beneath the product details area.

The product shipping options seem compacted into quite a thin column,

I tried the CSS below – but I didn’t seem to have any affect…

#order_review table.shop_table th, #order_review table.shop_table td {
width: 200px!important;
}

Any ideas your end?

Thanks

Chris

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I forward this to my colleague. He will assist you shortly.
Thanks
Mohammad

[MarieWorks]

Many thanks Mohammad, Look forward to hearing from them.

[Mohammad – SUPPORT]

Hi,
Its ok.
Thanks
Mohammad

[MarieWorks]

Hi Mohammad,

Has there been any progress with this?

Our checkout is currently completely broken at some screen resolutions (see attached)

Thanks

Chris

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi there

Change:

.woocommerce td.product-name dl.variation{
width:270px !important;
}

to

.woocommerce tbody td.product-name dl.variation {
  width: 160px !important;
}

– Kyle

[MarieWorks]

Hi Kyle,

Still breaking at certain screen resolutions Im afraid (screen shot attached)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Ok try this instead:

@media only screen and (min-width: 1200px) { 
.woocommerce tbody td.product-name dl.variation {
  width: 160px !important;
}
}

– Kyle

[MarieWorks]

thanks for your help Kyle – seems to be behaving at different resolutions now (screen shot attached)

Thankyou again!

Attachments:

You must be logged in to view attached files.