magento move configurble product options using css - magento

Question

please visit these links:
configurable product
simple product
in configurable product, i want to move "color" & charactar to top of the page.
i want to move this above "Check Delivery Availability " block.
Means i want this next to text "Age: 2 Years & Above". There is a gap after 4 lines. i want to move color and charactar there.
please help me to find solution.
This is view.phtml
<?php
?>
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $pageLayout = str_replace(array('page/','.phtml'),'',Mage::app()->getLayout()->getBlock('root')->getTemplate()); ?>
<?php $_product = $this->getProduct(); ?>
<?php $setting = Mage::helper('em0113settings'); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div class="Individual">
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
<div class="product-essential">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-img-box" style="width:<?php echo $setting->getImageProduct_BaseImageWidth(390) ?>px;">
<?php echo $this->getChildHtml('media') ?>
</div>
<?php
$related_product_collection = $_product->getRelatedProductCollection();
$related_product_collection->AddStoreFilter();
$count = count($related_product_collection);
?>
<div class="product-shop <?php if($count > 0 && $pageLayout=='1column'): ?>has-related<?php else: ?>no-related<?php endif ?>">
<div class="product-shop-wrapper <?php if($_product->isGrouped()): ?>grouped<?php endif ?>">
<?php list($_prev_prod, $_next_prod) = Mage::helper('em0113settings/product')->getPreviousNextProducts($this->getProduct()); ?>
<!--<?php if($_prev_prod != NULL): ?>
<?php echo $this->__('Previous') ?>
<?php endif; ?>
<?php if($_next_prod != NULL): ?>
<?php echo $this->__('Next') ?>
<?php endif; ?>-->
<div class="product-name">
<h2><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
</div>
<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
<!--<?php if ($this->canEmailToFriend()): ?>
<p class="email-friend"><?php echo $this->__('Email to a Friend') ?></p>
<?php endif; ?>-->
<div class="Pro_des">
<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<hr>
<br/>
<!-- <h2><?php echo $this->__('Quick Overview') ?></h2> -->
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
</div>
<?php endif;?>
</div>
<!--
<?php if ($this->displayProductStockStatus()): ?>
<?php if($_product->isSaleable()): ?>
<p class="availability in-of-stock"><span><?php echo $this->__('In of stock') ?></span></p>
<?php else : ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<?php endif; ?>
-->
<hr class="hr">
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
<hr class="hr">
<div class="check_delivery">
<?php echo $this->getLayout()->createBlock('core/template')->setTemplate('checkdelivery/checkdelivery.phtml')->toHtml();?>
</div>
<div class="Quick">
<div class="Quick_1">
<!--<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<h2><?php echo $this->__('Quick Overview') ?></h2>
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
</div>
<?php endif;?>-->
<div class="product-data">
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php else:?>
<?php echo $this->getChildHtml('addto') ?>
<?php endif; ?>
<!-- <?php if ($_product->isAvailable()) {?>
<div><?php //$buttonTitle = $this->__('Add to Cart'); ?>
<button type="button" title="<?php //echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php //echo $buttonTitle ?></span></span></button>
</div>
<br/>
<div ><button class="button buy-now" onclick="location.href ='{{config path="web/unsecure/base_url"}}/checkout/cart/add?product=1&qty=1'">
<span><span>Buy Now</span></span></button>
</div>
<?php }?>-->
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>
</div>
<div class="Quick_2">
<!-- Soled By -->
<div class="soled_by">
<?php
$helper=Mage::helper('marketplace');
$_product=Mage::registry('current_product');
$productowner=Mage::getModel('marketplace/product')->isCustomerProduct($_product['entity_id']);
if($productowner['userid']!=""){
$captchenable = $percent = Mage::getStoreConfig('marketplace/marketplace_options/captcha');
$rowsocial=Mage::getModel('marketplace/userprofile')->getPartnerProfileById($productowner['userid']);
}
?>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<div class="soled-by-dealer">
<!--<div class="block-title"><strong><span>
<?php if($rowsocial['shoptitle']!='')
echo $rowsocial['shoptitle'];
else
echo $rowsocial['profileurl']; ?>
</span></strong>
</div>-->
<h5> SOLD BY : </h5>
<span>
<?php if($rowsocial['profileurl'] == "kidsdial2")
{?>
<a href="<?php echo Mage::getUrl('marketplace/seller/collection').$rowsocial['profileurl'] ?>" title="<?php echo "Totaltoys"; ?>" id="siteconnect">
<?php echo "Totaltoys"; ?></a><?php
}
else{?>
<a href="<?php echo Mage::getUrl('marketplace/seller/collection').$rowsocial['profileurl'] ?>" title="<?php echo $rowsocial['profileurl']; ?>" id="siteconnect">
<?php echo $rowsocial['profileurl']; ?></a><?php
}
?>
</span>
</div>
<br/>
<div class="delivery_details">
<div class="COD">
<?php $attribute = $_product->getResource()->getAttribute('cod_available');
$attribute_value = $attribute ->getFrontend()->getValue($_product);
if ($attribute_value == "Yes"){ ?>
<h5> CASH ON DELIVERY </h5>
<div class="Delivery_hover_details">?<p class="killing"><?php echo "Available";?></p></div>
<?php }else{ ?>
<i class="fa fa-times"></i>
<p>
<h5 style="position:relative;bottom: 11px;">CASH ON DELIVERY </h5>
<p class="reduce"><?php echo " Not Available"; ?></p>
</p>
<?php } ?>
<span class="coupontooltip">
<div class="cod_content">
<h5>How do I place a Cash on Delivery (COD) order?</h5>
<p>All items that have the "Cash on Delivery Available" icon are valid for order by Cash on Delivery.</p>
<p>Add the item(s) to your cart and proceed to checkout.When prompted to choose a payment option, select "Cash on Delivery". </p>
<p>Once you place the order you will receive confirmation call from our customer support for validation with in 48 hours. Once verified and confirmed, your order will be processed for shipment in the time specified, from the date of confirmation. You will be required to make a cash-only payment to our courier partner at the time of delivery of your order to complete the payment.</p>
<p>Terms & Conditions</p>
<p>The maximum order value for COD is ₹5000.</p>
<p>e-Gift Vouchers or Store Credit cannot be used for COD orders.</p>
<p>Cash-only payment at the time of delivery.</p>
</div>
</span>
</div>
<div class= "bottom3">
<!-- wholesale available -->
<?php
//$product is your current product
if($_product->getTierPrice()) {
echo "
<div class = 'quickphp'>
<h5>Wholesale</h5>
Available.<br>
Usually Delivered in 10-15 business days.
</div>
";
}
else{
echo "
<div class = 'quickphp'>
<h5>Wholesale</h5>
Not Available.<br>
</div>
";
}
?>
<div class="avail">
<?php if ($this->displayProductStockStatus()): ?>
<?php if($_product->isSaleable()): ?>
<p class="availability in-of-stock"> <h5>Availability</h5> <?php echo $this->__('In Stock') ?></span></p>
<?php else : ?>
<p class="availability out-of-stock"> <h5>Availability</h5> <?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="replace">
<span> <b>7 days</b> Replacement Guarantee</span>
<div class="Delivery_hover_details">?
<span class="coupontooltip">
<h5> How do I return an item purchased on Totaltoys.com</h5>
<p>Conveniently, you can call us at 092-434-22233 and email us at contact#totaltoys.com with order number, invoice number and product name. If you've received an item in a 'Damaged', 'Defective' or 'Not as Described' state.</p>
<h5>Return & Replacement policy:</h5>
<p>Returns or replacement request should be placed within 7 days from the date of delivery.</p>
<p>As we receive your request, our concerned team will contact you to validate the compliant. The validation process may require submitting of product photos. Once the validation process is completed then further action will be taken.
Once the product reaches to us/seller, the replacement will be proceed in 1-2 working days after physical inspection of the goods and shipment will be done simultaneously.</p>
<p>If you've received an item in a 'Damaged', 'Defective' or 'Not as Described' state, all replacements/pickups will be done free of cost.</p>
<p>If the packaging is tampered with or damaged, before accepting delivery of the goods, please refuse to take delivery of the package, and call us on 092-434-22233 or mail us at contact#totaltoys.com , mentioning your order reference number. We shall make our best efforts to ensure that a replacement delivery is made to you at the earliest.</p>
<p>In the rare circumstances where a pickup cannot be done, you can ship the product through any courier. You will be reimbursed the shipping charges against the original receipt.</p>
<p>Replacement is subjected to availability of stock. In case a replacement is not available, the amount will be refunded to your account from which the purchase was made. (Amount includes shipping and gift wrapping charges)</p>
<h5> Return Request is not Accepted If:</h5>
<li>Return request is made outside the specified time period</li>
<li>Missing of tags, labels, original packing, and invoice.</li>
<li>Misused or Mishandle of the product from customer end.</li>
<p>For all refunds we will refund the amount to same mode of payment as used during checkout. Refunds for cash on delivery will be made via online transfer of funds to the customers bank account.</p>
<p>If the customer chooses to cancel the order before the product is shipped, he will be entitled to a 100% refund.
Do I have to return the free gift when I return a product?</p>
<p>Yes. The free gift is included as part of the item order and needs to be returned along with the originally delivered product</p>
<p>Please contact us on contact#totaltoys.com or call us at 092-434-22233 for any doubts and concerns</p>
</span>
</div>
</div>
</div>
</div>
<div class="Delivery">
<h5> Delivered By </h5>
<div class="Delivery_hover_details">?
<span class="coupontooltip">
<div class="delivery_content">
<h5>What is the estimated delivery time?</h5>
<p>Sellers generally procure and ship the items within the time specified on the product page. Business days exclude public holidays and Sundays.</p>
<p>Estimated delivery time depends on the following factors:
<li>Time of the order, usually orders made after 2:00pm can be shipped only on next workingday</li>
<li>The Seller offering the product</li>
<li>Product's availability with the Seller</li>
<li>The destination to which you want the order shipped to and the Seller's location</li></p>
</div>
</span>
</div>
<ul class="fk-ul-disc">
<li>Usually Delivered in 3-5 business days.</li>
<li> Delivery Time may exceed than usual due to Festival Holidays</li>
</ul>
</div>
</div>
</div>
<!--<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php else:?>
<?php echo $this->getChildHtml('addto') ?>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>-->
<?php echo $this->getChildHtml('other');?>
<?php echo $this->getChildHtml('short_des_after'); ?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
<?php echo $this->getChildHtml('shippingreturns') ?>
</div>
</div>
<!--<span class="or_buy_now"> -- OR --</span>-->
<!--<button type="button" title="<?php echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>-->
<!-- Buy Now -->
<div class="clearer"></div>
</form>
</div>
<!-- Add button share facebook -->
<?php if ($setting->getImageProduct_ViewSocial()): ?>
<div id="social-share" class="hide-lte0 hide-lte1 hide-lte2"></div>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('#social-share').dcSocialShare({
buttons: 'facebook,plusone,twitter,pinterest',
twitterId: 'designchemical',
email: 'moc//niamod/liame',
align: 'right',
floater: false
});
});
</script>
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
<div class="product-collateral">
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?>
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php if ($title = $this->getChildData($alias, 'title')):?>
<h2><?php echo $this->escapeHtml($title); ?></h2>
<?php endif;?>
<?php echo $html; ?>
</div>
<?php endforeach;?>
<?php echo $this->getChildHtml('product_additional_data') ?>
<?php echo $this->getChildHtml('product_additional_collateral') ?>
</div>
<?php echo $this->getChildHtml('catalog.product.related'); ?>
<?php echo $this->getChildHtml('review_list') ?>
<?php echo $this->getChildHtml('upsell_products') ?>
<?php if (Mage::helper('em0113settings')->getImageProduct_UseTabs()): ?>
<script type="text/javascript">
//<![CDATA[
jQuery(window).ready(function() {
setTimeout(function() {
timeout = null;
EM.tools.decorateProductCollateralTabs();
}, 200);
});
//]]>
</script>
<?php endif ?>
</div>
<!-- mobile -->
<div class="set">
<?php $attributeSetModel = Mage::getModel("eav/entity_attribute_set");
$product=Mage::getModel('catalog/product')->load($_product->getId());
$attributeSetModel->load($product->getAttributeSetId());
$attributeSetName = $attributeSetModel->getAttributeSetName();
if($attributeSetName=='Mobile'){ echo $this->__('color may vary as shown in above image'); } ?>
</div>
<!-- mobile end-->
<style>
.reduce {
clear: both;
float: left;
bottom: 13px;
border-radius: 2px;
color: #666;
display: inline-block;
font-size: 11px;
height: 0px;
line-height: 6px;
position: relative;
text-align: center;
text-decoration: none;
}
.set {
position:relative;
bottom:950px;
}
</style>

Answer 1

Why do you want to move it using CSS, when you can move it via phtml file code.
Search for the below code:
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
MOVE and place this just BEFORE:
<div class="check_delivery">
<?php echo $this->getLayout()->createBlock('core/template')->setTemplate('checkdelivery/checkdelivery.phtml')->toHtml();?>
</div>
So your code will now look like:
<hr class="hr">
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
<hr class="hr">
<div class="check_delivery">
<?php echo $this->getLayout()->createBlock('core/template')->setTemplate('checkdelivery/checkdelivery.phtml')->toHtml();?>
</div>
After you have done this, CLEAR CACHE - Delete /var/cache and /var/full_page_cache (if applicable) folders.
Few additional inputs about your code, there are Magento Standard ways of coding which MUST be followed for best practices.
1. Like for example, you might want to clean up the code. Magento's recommendation is to use the below way of coding when adding any CONTENT via phtml files.
<?php echo $this->__('Your Content'); ?> //this is called TRANSLATION in Magento
This means, you should be doing something like this:
<span class="coupontooltip">
<div class="cod_content">
<h5><?php echo $this->__('How do I place a Cash on Delivery (COD) order?'); ?></h5>
...
...
..
</div>
</span>
This TRANSLATION helps when you are creating websites with a different locale.
2. Secondly, Recommendation for commenting out lines.
DO NOT comment out code using HTML comments. Use as below:
Single line comment
<?php //<b>Strong</b> ?>
Multi line comment
<?php /*<b>Strong</b>*/ ?>
3. DO NOT write CSS in the same phtml file
Use styles.css under /skin/frontend/yourpackage/youtheme/css folder
[Editing answer based on the modifications required]
Look for catalog.xml file inside /app/design/frontend/yourpackage/yourtheme/layout folder, Search for as="container2"
<catalog_product_view translate="label">
...
...
...
<block type="core/template_facade" name="product.info.container2" as="container2">
<action method="setDataByKey"><key>alias_in_layout</key><value>container2</value></action>
<action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
<action method="append"><block>product.info.options.wrapper</block></action>
<!--action method="append"><block>product.info.options.wrapper.bottom</block></action>
</block--> <!--comment out this line-->
<action method="unsetCallChild"><child>container1</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
<action method="unsetCallChild"><child>container2</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
</block>
...
</catalog_product_view>
To move the COLOR and CHARACTER dropdowns/options next to each other, update the code this way:
<div class="desc-options"> //add new div
<div class="Pro_des">
<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<hr>
<br/>
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
</div>
</div>
<?php endif;?>
</div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</div>
Remove below code block from above "Check Delivery ..."
<hr class="hr">
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
Add CSS as below
styles.css line no: 1021, search for ".product-options"
Change the width: 100% to width: 50%;
In THEME CSS do the below:
.product-view .short-description { width: 50%; float:left; }
dl dt {
font-weight: bold;
display: block;
margin: 0 0 .5em;
}
.product-options dd {
margin: 4px 0;
display: inline-block;
}
To move ADD TO CART and BUY NOW buttons as Simple Product, update your code this way:
<div class="Quick_1">
<div class="product-data">
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php echo $this->getTierPriceHtml() ?>
<?php echo $this->getChildHtml('product.info.options.wrapper.bottom') ?> // add this line
</div>
Let me know if this helps.
Happy Coding...