View Single Post
Old 01-03-2017, 01:22 PM
river's Avatar
river river is offline
Ecwid Team
Join Date: Feb 2015
Posts: 452

Originally Posted by Debbie Armstrong View Post
I want to modify the styling of the order confirmation from the standard look to something easier to read. I have a lot of option to my custom product and sometimes options get missed because the styling is just a paragraph. I'd like to change it to a list style.

thx for any help,
Hi Debbie,

I've checked our history and see that one of our agents Cyril has already provided you with a solution via email. I'll post it here as well for everyone else:

To display product options as a list, you should add the below CSS code to your custom theme in the Ecwid Control Panel → Settings → Design → Custom CSS Themes:

/* Display product options on the order confirmation page as a list instead of a paragraph */
.ecwid-Invoice-optionsList .gwt-InlineHTML { display: block; }

/* Add some bullet to the list to make it look prettier */
.ecwid-Invoice-optionsList .gwt-InlineHTML:before { content: "•"; margin: 0 5px 0; }
In the result, you'll get this on the Order Confirmation page:

In the addition, with an extra line, you could make the option names bolder:

/* Make option names bolder */
.ecwid-Invoice-optionsList .gwt-InlineHTML .ecwid-Invoice-optionsList-name { font-weight: bold; }
Hope this helps. If there's anything else you need to know – please ask.
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.