The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 10-30-2016, 12:59 PM
Evi Hagenlocher's Avatar
Evi Hagenlocher is offline
 
Join Date: Aug 2016
Posts: 2
Default

Product Detail Page: How to change position of price (below all options, before "add to basket")


What CSS code do I need to put the price below all my options (not on the top) – the price should be before the "add to basket" button?

Last edited by Evi Hagenlocher; 10-30-2016 at 03:37 PM.
  #2  
Old 10-31-2016, 08:10 PM
Cyril D's Avatar
Cyril D Cyril D is offline
Ecwid Team
 
Join Date: Feb 2015
Location: Ecwid HQ
Posts: 530
Default

Hey Evi,

Thanks for your message!

Quote:
What CSS code do I need to put the price below all my options (not on the top) – the price should be before the "add to basket" button?
That's a tricky question, to be honest. CSS is a pretty powerful tool and you can do lots of things with it but it still has some limitations. We can change the position of each HTML element by means of CSS for sure, including the product price label and the "Add to Bag" button. However, it's hard (if possible) to keep the right position when the height and width of the parent element are constantly changing. I'll explain that below.

Let's take a look at your "Save-the-Date-Karte "Dreamy Woodland"" item. To move the price down and place it just before the "Add to Bag" button, you could use the following CSS snippet:

Code:
/* Move down the product price label on the product details page */
div.ecwid-productBrowser-price { position: relative; top: 475px; }

/* Move down the Add to Bag button on the product details page */
.ecwid .ecwid-btn--addToBag { position: relative; top: 15px; }
As always, it should be added to your custom theme in the Ecwid Control Panel → Settings → Design → Custom CSS Themes.

At first, the price and button look just fine:



However, once new elements appear on the page, such as new product options, buttons, etc., that fixed positioning simply doesn't work as new elements easily overlap the ones we moved:



It's still possible to achieve the result you need by means of JavaScript. With JavaScript you can change the order of the HTML elements instead of changing their position with CSS. We have the JavaScript API that allows utilizing JavaScript codes and changing the look and feel and behaviour of Ecwid's storefront.

Of course, implementing such JavaScript codes requires some coding and thus programming skills, so you may consider hiring a programmer for doing this job for you.

Alternatively, you might request a quote for accomplishing this task from our customization team. Just let me know if you're interested in this and they'll reach you out shortly with the details.

Hope that helps!

More on the topic:
__________________
Cyril D.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
The Following User Says Thank You to Cyril D For This Useful Post:
Evi Hagenlocher (11-01-2016)
  #3  
Old 11-01-2016, 08:57 AM
Evi Hagenlocher's Avatar
Evi Hagenlocher Evi Hagenlocher is offline
 
Join Date: Aug 2016
Posts: 2
Default

Thanks for your answer. I like to hire somebody who does it with Java. Beacuse the mount of product options changes from product to product. I'm interested in request a quote for accomplishing this task from your customization team. How does this work?
  #4  
Old 11-02-2016, 08:06 AM
Cyril D's Avatar
Cyril D Cyril D is offline
Ecwid Team
 
Join Date: Feb 2015
Location: Ecwid HQ
Posts: 530
Default

Hi Evi,

Thanks for getting back to us! The customization team will get in touch with you soon at the email address associated with your account.
Quote:
I'm interested in request a quote for accomplishing this task from your customization team. How does this work?
Basically, it works this way: we develop an app for your store which will automatically adjust the position of certain storefront elements on each page—you'll tell us which ones and how.

Next, how much it costs and how to pay for it. We offer two ways to pay for custom development tasks:
  1. One-time fee. We'll either charge your credit card associated with the store or issue a PayPal invoice. We'll be able to provide you with the exact quote once you discuss all the details with the customization team.
  2. Subscription to the annual Unlimited ($990/year). This plan includes 12 hours of the custom development work and it works as follows: you need an extra function for your Ecwid shop, request it from us and we estimate it in development hours. Let's say, this customization task will take two hours. So if you subscribe to the annual Unlimited, once we develop this feature for you, you'll have ten more dev hours of customization and be able to use them anytime later.

Next, guarantees: we guarantee the correct work of the customization in your Ecwid store and will provide support for the developed features for one year since implementation, or while you're subscribed to the annual Unlimited plan.

Hope that helps! Again, the customization team will contact you soon via email.
__________________
Cyril D.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:49 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.