View Single Post
Old 09-10-2013, 06:17 AM's Avatar is offline
Join Date: Dec 2011
Location: CA / FL
Posts: 345

I think you'll either have to make sure the product text never reaches a 2nd line or use javascript to move the elements or calculate where to move them. The reason they aren't the same is because they move relative to their starting position and the multi line text creates a difference.

For option 1 you could do:
.ecwid-productBrowser-productNameLink {
    height: 25px;
    overflow: hidden;
It will cut off the product names though. You could try reducing the font-size to reveal more text to the customer.

For javascript, you could move ".ecwid-productBrowser-price-savePanel" into the same div as the images which would give them all the same starting position no matter how long the text.

That way is a lot more complicated though:
You'll need jQuery:
<script type="text/javascript" src=""></script>
Then to move the panels:
Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == 'CATEGORY' ) {
        $('.ecwid-productBrowser-price-save-container').parents('.ecwid-productBrowser-productsGrid-productBottomFragment').find('.ecwid-productBrowser-productNameLink a').each(function() {
            var product_name = $(this).text();
            var save_container = $(this).parents('.ecwid-productBrowser-productsGrid-productBottomFragment').find('.ecwid-productBrowser-price-save-container');
            $(this).parents('tr').find('img').each(function() {
                if ($(this).attr('alt') == product_name) {
I'm no professional so I'm not sure if that is the most efficient way.

You'll need to update the css.

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-grid div.ecwid-productBrowser-price-save-container
The panel isn't in the price-grid anymore so just remove that
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container
And the images will move to the left so you'll need to recenter them with:
.ecwid-productBrowser-productsGrid-productTopFragment-inner a {
    display: block;
    text-align: center;
There might/probably will need to be other minor adjustments to the CSS.

Last edited by smoothsailingclothing; 09-10-2013 at 06:20 AM.
The Following 2 Users Say Thank You to For This Useful Post:
thurstonandlovey (09-10-2013), Maya (09-10-2013)