Advice on formating/placing "VAT incl." & "plus Shipping" in Product Display

[Master One]

I am new to PrestaShop. I've just installed v.1.6.0.6, made a copy of the default template and now I am digging through configuring and adapting my setup.

 

The first modification I made to the template was to activate the section in product.tpl which is responsible for displaying "tax incl." or "tax excl." behind the shown price (for some reason that part was commented out).

 

Then I have added a line to append the wording "plus Shipping" linked to the shipping CMS page.

 

That section in product.tpl looks like this now:

<p class="our_price_display" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    {if $product->quantity > 0}<link itemprop="availability" href="http://schema.org/InStock"/>{/if}
                                    {if $priceDisplay >= 0 && $priceDisplay <= 2}
                                        <span id="our_price_display" itemprop="price">{convertPrice price=$productPrice}</span>
                                        {if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1 && $display_tax_label == 1) || !isset($display_tax_label))}
                                            {if $priceDisplay == 1}<br />{l s='tax excl.'}{else}<br />{l s='tax incl.'}{/if}
                                        {/if}
                                        <a href="{$link->getCMSLink('1')}" title="{l s='plus Shipping'}"> {l s='plus Shipping'}</a>
                                        <meta itemprop="priceCurrency" content="{$currency->iso_code}" />
                                    {/if}
                                </p>

The result in the front end looks as follows:

 

 

As you can see, the "tax incl. plus Shipping" is way too large and misplaced, it should look more something like this (taken from another e-commerce demo setup):

 

 

So the question is now, how do I properly format the wording "tax incl. plus Shipping" the right way?

How would you solve this issue?

 

It's been a while since I have played around with PHP/HTML/CSS, so any help is highly appreciated.

[Master One]

Well, I have now changed the code in product.tpl as follows:

                            <!-- prices -->
                            <div class="price">
                                <p class="our_price_display" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    {if $product->quantity > 0}<link itemprop="availability" href="http://schema.org/InStock"/>{/if}
                                    {if $priceDisplay >= 0 && $priceDisplay <= 2}
                                        <span id="our_price_display" itemprop="price">{convertPrice price=$productPrice}</span>
                                        <meta itemprop="priceCurrency" content="{$currency->iso_code}" />
                                    {/if}
                                </p>
                                <p>
                                    {if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) || !isset($display_tax_label))}
                                        {if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
                                        <a href="{$link->getCMSLink('1')}" title="{l s='plus Shipping'}"> {l s='plus Shipping'}</a>
                                    {/if}
                                </p>

and the result is this:

 

 

Already looking good! Now I'd like to change the color of "plus Shipping", maybe underline it and have a mouse-over effect, so that it better can be identified as a link.

 

Should I put a new CSS section for this into global.css or product.css, or can I reuse an already defined CSS section?

 

Not sure what the end result should look like exactly, but more something like this (taken from another e-commerce demo):

 

 

Any help really is highly appreciated. I don't want to just patch my stuff together, but do it the right way.

[Master One]

This is where I am now:

 

Code in product.tpl:

                            <!-- prices -->
                            <div class="price">
                                <p class="our_price_display" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    {if $product->quantity > 0}<link itemprop="availability" href="http://schema.org/InStock"/>{/if}
                                    {if $priceDisplay >= 0 && $priceDisplay <= 2}
                                        <span id="our_price_display" itemprop="price">{convertPrice price=$productPrice}</span>
                                        <p class="tax_and_shipping">
                                            {if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) || !isset($display_tax_label))}
                                                {if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
                                            {/if}
                                            <a href="{$link->getCMSLink('1')}" title="{l s='plus Shipping'}"> {l s='plus Shipping'}</a>
                                        </p>
                                        <meta itemprop="priceCurrency" content="{$currency->iso_code}" />
                                    {/if}
                                </p>
                                <p id="reduction_percent" {if !$product->specificPrice || $product->specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}>
                                    <span id="reduction_percent_display">
                                        {if $product->specificPrice && $product->specificPrice.reduction_type == 'percentage'}-{$product->specificPrice.reduction*100}%{/if}
                                    </span>
                                </p>
                                <p id="old_price"{if (!$product->specificPrice || !$product->specificPrice.reduction) && $group_reduction == 0} class="hidden"{/if}>
                                    {if $priceDisplay >= 0 && $priceDisplay <= 2}
                                        <span id="old_price_display">{if $productPriceWithoutReduction > $productPrice}{convertPrice price=$productPriceWithoutReduction}{/if}</span>
                                        {if $tax_enabled && $display_tax_label == 1}{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}{/if}
                                    {/if}
                                </p>
                                {if $priceDisplay == 2}
                                    <br />
                                    <span id="pretaxe_price">
                                        <span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, $smarty.const.NULL)}</span>
                                        {l s='tax excl.'}
                                    </span>
                                {/if}
                            </div> <!-- end prices -->

The following added to product.css:

.tax_and_shipping a {
  color: #E4752B; }
  .tax_and_shipping a:hover {
    text-decoration: underline; }

Result:

 

 

It looks good, but I am still not sure if this is the proper way to do it, epecially because of the code in product.tpl which shows the price excl. VAT as well if $priceDisplay=2.

 

I'm not sure where $priceDisplay is configured, which is why I have started a new thread about that matter.