カートの位置を変えるには

2012 年 2 月 4 日

ホーム フォーラム テンプレート(テーマ) カートの位置を変えるには

このトピックには7件の返信が含まれ、2人の参加者がいます。5 年、 9 ヶ月前 naho さんが最後の更新を行いました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #51043

    naho
    参加者

    いつもフォーラムにはお世話になっております。

    今回は商品詳細ページのカートの位置の事についてご教授頂きたく質問させていただきました。

    デフォルトだと上から商品名、商品説明、そして一番下に「カートに入れる」があると思うのですが、その「カートに入れる」の位置を商品名のすぐ下に入れたいと思うのですが、usces-cart.cssの

    /*********************************************************************/

    /* cart Start */

    #main h1.cart_page_title {

    margin: 0px;

    padding: 0px 0px 10px 0px;

    font-size: 16px;

    }

    div.usccart_navi li.ucart {

    width: 24%;

    }

    #cart table {

    width: 100%;

    }

    #main h3 {

    font-size: 100%;

    background: url(images/h3_bg.gif); /*h3の背景画像設定*/

    background-repeat: no-repeat;

    color: #FFFFFF; /*h2の文字色(ここでは白)*/

    margin-top: 10px;

    line-height: 28px;

    letter-spacing: 0.2em; /*文字間隔をほんの気持ち広げる設定。通常にしたいなら、この1行を削除する。*/

    padding-bottom: 2px;

    padding-left: 15px;

    }

    /* cart End */

    を上に移動しても何も変化がありません。

    うまく表示できる技をご教授ください。

    よろしくお願いいたします。

    #63759

    nanbu
    参加者

    こんにちは。

    >を上に移動しても何も変化がありません。

    とありますが、何を上に移動したのでしょうか。。CSSの絶対位置を利用して上にあげたということでしょうか。もう少し詳しくご説明いただけると助かります。

    #63760

    naho
    参加者

    nanbuさん、お世話になります。

    カートのstyle.cssは以下がすべてになります。

    その中の「カートに入れる」部分が最初に質問している中のcssの部分かと思い、

    /*********************************************************************/

    /* wc_item_single Start */

    の上にそのcssをコピーしたのですが、何の変化も現れず、ご表示もなく、、、といった具合でした。

    カートの位置を移動、というよりは、商品名や価格の下にもう一つ「カートにいれる」を追加したい感じなのです。

    どのようにいじったらよいものでしょうか。

    ご教授よろしくお願いいたします。

    @charset “utf-8”;

    /* CSS Document */

    #wp-calendar td.businessday {

    background-color: #FFECCE;

    color: #F00;

    }

    /*********************************************************************/

    /* wc_item_single Start */

    #main h1.item_page_title {

    padding-bottom: 10px;

    font-size: 1.5em;

    }

    #itempage h2.item_name {

    height: 18px;

    margin-bottom: 10px;

    margin-left: 310px;

    padding: 3px 5px;

    background-color: #999999;

    font-size: 14px;

    color: #FFFFFF;

    line-height: 18px;

    }

    #itempage h3.item_name {

    height: 60px;

    margin-bottom: 10px;

    margin-left: 310px;

    padding: 3px 5px;

    background-color: #784421;

    font-size: 14px;

    color: #FFFFFF;

    line-height: 18px;

    }

    #itempage .itemimg {

    width: auto;

    }

    /* wc_item_single End */

    /*********************************************************************/

    /* wc_item_single Start */

    #itempage .field {

    margin-left: 310px;

    }

    #itempage .assistance_item {

    width: 740px;

    }

    #itempage .assistance_item ul {

    width: 750px;

    margin-right: -10px;

    overflow: hidden;

    _zoom: 1;

    }

    #itempage .assistance_item ul li {

    width: 240px;

    margin-right: 10px;

    }

    #itempage .assistance_item .listbox {

    height: 125px;

    margin-right: 0px;

    overflow: hidden;

    }

    /* wc_item_single End */

    /*********************************************************************/

    /* cart Start */

    #main h1.cart_page_title {

    margin: 0px;

    padding: 0px 0px 10px 0px;

    font-size: 16px;

    }

    div.usccart_navi li.ucart {

    width: 24%;

    }

    #cart table {

    width: 100%;

    }

    #main h3 {

    font-size: 100%;

    background: url(images/h3_bg.gif); /*h3の背景画像設定*/

    background-repeat: no-repeat;

    color: #FFFFFF; /*h2の文字色(ここでは白)*/

    margin-top: 10px;

    line-height: 28px;

    letter-spacing: 0.2em; /*文字間隔をほんの気持ち広げる設定。通常にしたいなら、この1行を削除する。*/

    padding-bottom: 2px;

    padding-left: 15px;

    }

    /* cart End */

    /*********************************************************************/

    /* member Start */

    #main h1.member_page_title {

    margin: 0px;

    padding: 20px 0px 10px 0px;

    font-size: 1.2em;

    }

    /* member End */

    /*********************************************************************/

    #63761

    nanbu
    参加者

    CSSの書かれているセレクタの位置変更しても、カート投入ボタンの位置は変わりません。

    カート投入ボタンの位置を変更するのであれば、CSSではなくテンプレートファイルを修正するのが良いと思います。該当するテンプレートはご利用中のテーマ内にあります wc_templates/wc_item_single.php です。

    テンプレートに書かれているカート投入ボタンは<?php usces_the_itemSkuButton(__('Add to Shopping Cart', 'usces'), 0); ?> ですが、formの関係もありますので、これだけを移動してもうまく行きません。

    もっとも単純な方法は、<?php the_content(); ?> の位置をformの上か下に移動させるのが良いのではないでしょうか。

    #63762

    naho
    参加者

    ご説明を読む限り素人がいじるにはやはり動的なものは難しいかもしれません。

    おっしゃる通りwc_item_single.phpを少しいじってみましたがレイアウトがずれたり真っ白な画面になったりと、うーん、なかなか不安が増してまいりました。

    それでと言ってはなんなのですが、添付しております画のように商品名や価格などの部分を商品説明分とカートボタンの間に移動ではなく追加するにはどの部分に何をすればよいものでしょうか。

    移動についてはほかのご質問にあった様なのですが、追加については見つけられませんでしたので、このトピックではございますが改めてお聞きしたく思います。

    どうぞよろしくお願いいたします

    #63763

    naho
    参加者

    サイズが大きすぎたようなので再度アップいたします。

    [attachment=5689,61]

    #63764

    nanbu
    参加者

    wc_item_single.php をご覧ください。ご希望の部分はwc_item_single.php 内の以下の部分です。これをご希望の場所にコピーしていただければ良いかと思います。

    <h2 class="item_name"><?php usces_the_itemName(); ?>&nbsp;(<?php usces_the_itemCode(); ?>)</h2>
    <div class="exp clearfix">
    <div class="field">
    <?php if( usces_the_itemCprice('return') > 0 ) : ?>
    <div class="field_name"><?php _e('List price', 'usces'); ?><?php usces_guid_tax(); ?></div>
    <div class="field_cprice"><?php usces_the_itemCpriceCr(); ?></div>
    <?php endif; ?>
    <div class="field_name"><?php _e('selling price', 'usces'); ?><?php usces_guid_tax(); ?></div>
    <div class="field_price"><?php usces_the_itemPriceCr(); ?></div>
    </div>
    <div class="field"><?php _e('stock status', 'usces'); ?> : <?php usces_the_itemZaiko(); ?></div>
    <?php if( $item_custom = usces_get_item_custom( $post->ID, 'list', 'return' ) ) : ?>
    <div class="field"><?php echo $item_custom; ?></div>
    <?php endif; ?>

    <?php the_content(); ?>
    </div><!-- end of exp -->

    #63765

    naho
    参加者

    nanbuさん、お世話になっております。

    前述のphpを入れたところ、商品説明が入っていたためそこを省いてうまく追加することができました!

    色々な位置に追加をしてみて、どのphpがどの部分にあたるのか、今回もとても勉強になりました。

    素人で独学という事もあり、なかなか細かいところを学ぶ場も少ないため、このようなところがあって本当に嬉しいです。

    また質問することもあるかと思いますが、よろしくお願いいたします。

    ありがとうございました^^

8件の投稿を表示中 - 1 - 8件目 (全8件中)

このトピックに返信するにはログインが必要です。