引き続きWelcartネタとなります。商品個別ページでレイアウトを決めた後、カートボタンがもう一つ欲しい。そういうことありませんか？商品ページで商品スライダーの横にカートボタン、楽天ぽく縦長の商品説明を追加してその最後にもカートボタンが欲しい！そういう時はJQueryで要素をコピーしましょう。

Welcart商品ページにカートボタンを2つ設置する

まずはカートに入れる動作をする箇所を

<div class="clone-true">

カート動作PHP部分

</div>

などとしてくくってしまいましょう。ここまで出来たら後は楽勝。JQueryの出番です。

<script language="javascript">
$(function() {
$(".clone-true").clone(true).addClass("clone-cart").insertAfter(".text-section");
});
</script>

おしまい！

clone(true)でコピーして、コピーした要素にclassを追加することでコピーした要素だけにCSSを適用すれば全くイメージの違うカートボタンの出来上がりです。