changing position of quantity block in product page

Question

I am trying to change the position of quantity block in product page. I was trying to create a new quantity module named qty.phtml in /product/view folder and linked it in view.phtml using the following code

<?php echo $this->getChildHtml('qty') ?>

The code for quantity module (qty.phtml)

    <?php $_product = $this->getProduct(); ?>
    <?php $buttonTitle = $this->__('Add to Cart'); ?>
    <?php if ($_product->isSaleable()): ?>

    <div class="add-to-box">
    <?php if(!$_product->isGrouped()): ?>
    <div class="qty-wrapper">

    <strongx> <label for="qty"><?php echo $this->__('Qty:') ?></label> </strongx>

    <input type="text" name="qty" id="qty" maxlength="12" 
    value="<?php echo $this->getProductDefaultQty() * 1 ?>" 
    title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" 
    class="input-text qty" />

    </div>
    <?php endif; ?>

</div>
<?php endif; ?>

I have also edited catalog.xml file in

app/design/frontend/base/default/layout

i put this code in my catalog.xml file

<block type="catalog/product_view" name="product.info.qty" as="qty" template="catalog/product/view/qty.phtml">



<block type="catalog/product_view" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
                    <label>Bottom Block Options Wrapper</label>


                    <!--action method="append"><block>product.info.qty</block></action-->


                </block>

But after putting this code. It is breaking my product view page.

I do not have catalog.xml file in my theme directory. I only have local.xml file in it.

I am giving the image of current view of my product page and also what modification i am looking for.

Note: I am using custom theme called Ultimo

Thanks

What it look like now

What i want is

Answer 1

First only having an local.xml in your theme's folder is absolutely correct, since changes on the layout should be done only by this way. So please only use local.xml to alter the layout.

As you seem to lag a lot of basic knowledge I give you an example how to find out everything you need.

First you need to find where the qty input field is defined:

Activate your template hints in the backend by ticking Sytem -> Config -> Developer -> Debug -> Template path hints. Surf to your product detail page and you'll find your site in debug mode, showing the template file path of the blocks and some other information. For details see: http://excellencemagentoblog.com/blog/2011/09/07/magento-template-path-hints-magento/

Your qty input is inside app/design/frontend/[package]/[theme]/template/catalog/product/view/addtocart.phtml.

If you look inside this file you'll see the qty input and that the add to cart button is directly following. As you can imagine you need to split this group apart, since you want to have other field in between.

Cut out the part for the qty input:

    <?php if(!$_product->isGrouped()): ?>
    <label for="qty"><?php echo $this->__('Qty:') ?></label>
    <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
    <?php endif; ?>

and save a new version of the file.

IMPORTANT

When you alter themes, make sure to create your own custom subtheme, based on the package you are using.

Get more info at: http://docs.zooextension.com/post/magento-theme-customization

Understand the part of subtheming and the theme's fallback mechanism. You only need to write new files for changes - the rest will fallback to the default theme files.

Now you need to re-add the qty input field. Create a new .phtml file (like qty-input.phtml) in a appropriate folder like: app/design/frontend/[package]/[subtheme]/template/catalog/product/view/qty-input.phtml. Fill it with your cut out HTML snippet like:

<?php $_product = $this->getProduct(); ?>
<?php if($_product->isSaleable()): ?>
    <div class="add-to-cart-qty">
        <?php if(!$_product->isGrouped()): ?>
        <label for="qty"><?php echo $this->__('Qty:') ?></label>
        <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
        <?php endif; ?>
    </div>
<?php endif; ?>

You need to add a corresponding block as well as a call to show the block.

Copy your theme's local.xml to you subtheme layout folder: app/design/frontend/[package]/[subtheme]/layout/local.xml.

Find the layout node:

<action method="setTierPriceTemplate"><template>catalog/product/view/tierprices.phtml</template></action>

Before that insert a new block with your qty input phtml like:

<block type="catalog/product_view" name="product.info.addtocart.qty" as="addtocartqty" template="catalog/product/view/qty-input.phtml"/>

Probably the node isn't there. Don't panic. Just make sure the line to be added is inside the correct layout block:

<catalog_product_view>
    <reference name="content">
        ...
        <reference name="product.info">
        ...
            <block type="catalog/product_view" name="product.info.addtocart.qty" as="addtocartqty" template="catalog/product/view/qty-input.phtml"/>
        ...
        </reference>
    ...
    </reference>
...
</catalog_product_view>

Finally make sure you're newly created block gets shown. Copy app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml to your corresponding subtheme's folder.

Find <?php echo $this->getTierPriceHtml() ?> and add the following to output your input field beforehand: <?php echo $this->getChildHtml('addtocartqty') ?>.

Some things can differ due to your theme you've bought. Try to extrapolate your new knowledge. If it comes to configurable products/bundles etc. this whole thing gets way more complicated. I guess that's the time for a new question.

Also you have to fix the CSS to make everything look nice.

Good luck!