Woocommerce Single Product Page，标题、描述和内容都垂直显示在产品图像下方 - 腾讯云开发者社区

文章/答案/技术大牛

发布

woocommerce shortcode短代码调用

WooCommerce配备了很多shortcode短代码(简码)，可以直接在post帖子和page页面内插入内容，方便展示产品、分类等。...>以下是一些常用的woocommerce短代码注意短代码不要放在之间，""双引号和''单引号是在英文状态下 ---- page短代码 WooCommerce 如果没有您网站上的某个地方的前三个短代码...特殊产品属性这些属性不能与上面列出的“内容属性”一起使用，因为它们可能会导致冲突并且无法显示。应仅使用以下特殊属性之一。 best_selling– 将显示您最畅销的产品。必须设置为。...为此，我们将使用 Post ID（在创建产品页面时生成）以及 order 和 orderby 命令。由于您无法从前端看到 Post ID，因此 ID#s 已叠加在图像上。...[product_page id="99"] [product_page sku="FOO"] ---- 相关产品在产品详情页中列出相关产品。

16.6K2 0

woocommerce shop开发中高频使用的10个短代码

=”clothing” orderby=”popularity”]购物车短代码[woocommerce_cart]功能：显示购物车页面内容，包括已添加商品、数量调整和结算按钮结账页面短代码[woocommerce_checkout...]功能：显示结账表单，包括收货地址、付款方式等我的账户短代码[woocommerce_my_account]功能：显示用户账户页面，包括订单历史、地址管理等产品搜索短代码[woocommerce_product_search...[product id="123"]功能：显示特定 ID 的产品详情，ID 需替换为实际产品 ID特价产品短代码[sale_products]功能：展示所有正在促销的产品示例：[sale_products...per_page=”4″]相关产品短代码[related_products]功能：在产品页面显示相关产品，通常用于交叉销售最近查看的产品[recently_viewed_products]功能：展示用户最近浏览过的产品这些短代码可以直接在...WordPress的页面编辑器、文章编辑器或文本小工具中使用，大部分都支持通过参数进行自定义，以满足不同的展示需求。

3300 0

您找到你想要的搜索结果了吗？

是的

没有找到

WordPress外贸产品（B2B）网站优化方法7个实用建议!

这意味着你的文本应该包含强大的关键字，但仍然看起来有机和迷人。为什么产品描述如此必要?总的来说，这确实是您可以在网站上放置特定产品的唯一文本内容。...使用有效的页面标题页面标题对访问者和搜索引擎都至关重要。它告诉他们页面是关于什么的。电子商务网站通常有两种类型的网页:一种用于分类，另一种用于产品。在大多数情况下，页面和SEO标题是相同的。...优化元描述元描述是搜索引擎结果标题下的一段文本。元描述的主要目标是简要总结以下页面的内容。这就是元描述在谷歌中的样子: 你需要知道的第一件事是元描述不是直接排名的主要因素。...适当的图像优化有三个组成部分: 图片标题换句话说，这是一个图像标题。它对搜索引擎没有影响，但可能影响您与用户的工作。当用户将鼠标悬停在网站上的图像上时，他将看到一个带有标题的弹出窗口。...它是为发布高质量和搜索优化的内容而设计的。Yoast WooCommerce的主要目标是定制网站页面，以便在搜索引擎中正确显示。优化你的WP电子商务网站搜索引擎是重要的，即使在2019年!

5.8K2 0

25. 精细化列表项设计：多层嵌套布局与视觉层次构建

（垂直排列） Column({ space: 8 }) { // 文本和标签内容 }} .width('100%').height(120).padding(12).backgroundColor...产品列表、缩略图等需要统一尺寸的场景 Contain 保持宽高比缩放图片，使图片完全显示在容器内，可能有空白区域需要显示完整图片内容的场景 Fill...ScaleDown 保持宽高比，在None和Contain之间选择较小的一个需要在保持原始大小和完全显示之间平衡的场景在产品列表中，通常使用...}}右侧内容区域使用Column组件垂直排列产品标题、价格和标签。...数组，渲染每个产品列表项Row：水平排列图片和内容内容Column：垂直排列标题、价格和标签标签Row：水平排列多个标签6.2 布局嵌套层次本案例展示了多层嵌套布局的实现方式：第一层：外层Column（

2690 0

这个插件可以将你的WordPress文章、页面和产品导出为Hugo兼容的Markdown文件

Hugo兼容的Markdown文件，让你能够轻松地将内容迁移到Hugo静态网站生成器。...功能特点支持导出文章、页面和产品（需安装WooCommerce插件）保留分类、标签、特色图片等元数据生成Hugo兼容的Front Matter格式自动创建适当的目录结构导出过程中显示进度和结果统计安装方法从...Front Matter格式导出的Markdown文件将包含以下Front Matter元数据：layout: post title: "文章标题" slug: "post-slug" permalink...://example.com/gallery1.jpghttps://example.com/gallery2.jpg description: > 产品简短描述...注意事项请确保你的服务器有足够的权限在...wp-content/目录下创建和写入文件导出大型网站可能需要较长时间，请耐心等待导出过程中不要关闭浏览器窗口导出的文件路径和URL基于你的WordPress当前设置如果你的网站包含大量内容，建议分批次导出支持如果你在使用过程中遇到任何问题

2981 0

WordPress SEO：配置Yoast和添加内容目录

避免代码段变量如果你不手动编写代码段变量，则它们将用作你的SEO标题和元描述的模板。...SEO标题代码段变量：标题分隔符网站标题元描述代码段变量：摘录（Google选择的简短摘要内容） ? Yoast SEO标题写法 6....浏览你的内容类型，分类法和存档选项卡，然后选择不在搜索结果中显示这些内容。...然后将此代码添加到你希望面包屑显示的任何地方。最常见的位置是header.php，single.php或page.php。如果你需要帮助，请参见此处的Yoast面包屑教程。...以上就是关于Yoast SEO的后台设置详细过程，做好相关设置后，相关页面的SEO都会呈现，但是具体到所有编辑页面（page, post,tag），内容编辑器下方加上Yoast SEO设置菜单，还需要对每个页面进行

2.9K1 0

WPJAM Basic 5.9 详细更新说明

兼容 WooCommerce 之前后台文章列表开启「支持全面的 AJAX操作」，会让 WooCommerce 的订单和优惠券页面出现一些问题，最近接了一些 WooCommerce 的项目，仔细研究和处理了一下...所以就把很多操作都移到了 WordPress 后台文章列表页面，WPJAM Basic 有一块子菜单是关于文章列表的：所以我继续优化后台文章列表页面的操作交互，比如在把鼠标移到缩略图上面，会在右上角显示一个编辑图标...，点击会弹窗让你修改标题，摘要和头图。...为了约定或者校验 JSON 的数据格式，就诞生了 JSON Schema，可以简单理解为 JSON Schema 是一个描述和验证 JSON 数据结构的模式或规范，可以用来描述数据的格式和其他要求。...新增函数 wpjam_register_builtin_page_load 和 wpjam_register_plugin_page_load，用于后台内置的页面插件生成页面的加载。

9.2K3 0

14个好用的WordPress外贸商业主题适合多领域提供网站部署解决方案

可以使用Elementor Page Builder和额外的小部件添加内容并自定义其外观。...主要特点：标题和菜单选项包括320+滑块充分响应设计高级页脚选项无限的颜色和风格领域行业：摄影，机构，投资组合和其他。...然后，可以使用多功能Elementor Page Builder添加和编辑您的内容。它是最好的拖放构建器之一，适合新手和技术人员。...例如，不需要任何编码技能，因为您可以使用出色的Elementor Page Builder修改所有元素。还有多个页面选项，无限的颜色，自定义标题样式，以及许多其他功能。...可以让每一页、每一节和每一个元素都更吸引人、更吸引眼球并不需要你做什么。要在在线项目中添加专业视觉效果，您可以使用广泛流行的Elementor Page Builder。

7.9K3 0

把二级域名映射到wordpress网站相同别名的page页面

基于外贸WooCommerce建站场景，以下提供2种无插件实现方案(符合MVP轻量理念)，无需额外插件，通过服务器配置直接实现二级域名自动绑定对应Page页面(如beijing.wodepress.com...路径保留：支持二级域名下的子路径访问(如shanghai.wodepress.com/product/123→wodepress.com/shanghai/product/123)。...验证与故障排除1.验证是否生效访问beijing.wodepress.com，应自动跳转到wodepress.com/beijing(地址栏显示目标URL)。...SEO配置：在WP后台为每个Page页面添加独立的标题、关键词(推荐使用Rank Math插件，轻量且适配外贸SEO)，避免二级域名与主站页面内容重复。...该方案完全符合MVP轻量理念，无需安装任何插件，通过服务器原生配置实现二级域名与WP Page页面的自动绑定，兼顾性能、SEO和维护成本。

3461 0

为woocommerce开发支付网关插件，对接支付通道

() { $this->id = 'kekc_cn'; // 支付网关插件ID，可以字符串，但是要唯一 $this->icon = ''; // 将显示在结账页上你的支付网关图标。...内容为URL $this->has_fields = true; // 你需要自定义支付网关字段就填true $this->method_title = 'kekc_cn Gateway';..._{webhook name}', array( $this, 'webhook' ) ); } 添加管理配置字段这个的话都需要把，比如开发易支付支付网关，就需要url，商户ID，商户token等，...还需要"启用/禁用"，"标题"，"描述"和"测试模式"等设置项。...'; $this->description = trim( $this->description ); } // 显示带有标签的描述等。

4.3K1 0

Lighthouse的跨境电商独立站秘籍！

：套餐已经预设了服务器配置、带宽、流量包等内容，不需要了解每项的含义和计费规则；WooCommerce应用镜像模板则预置了WordPress、Nginx、MariaDB、PHP等建站必备的软件，无需手动安装...但都设置为英文，在后台的操作将举步维艰，要解决这个问题，就要了解如何只修改后台的语言，而不影响访客看到的部分。...这个时候可能会发现，WooCommerce这几个导航依然是英文，这要怎么办？ WooCommerce插件语言找到【仪表盘-更新】，拉到最下方可以看到【更新翻译】的按钮，点它就是了。...事实上，WooCommerce在这里提供了比较详细的指引，只需跟随它一步步操作就能完成了。设置付款方式需要注意的是，在设置付款方式前，需要先设置下WordPress地址和站点地址，后文有详细说明。...usr/local/lighthouse/softwares/nginx/conf/nginx.conf 此时你会进入到一个编辑页面中，不过别急，这里还需要你点击一下键盘上的 “i” 来开启编辑功能，将下方的内容修改完成后

17.4K1 0

18个最佳的产品页面设计（下）

本产品页面的每个部分都专用于介绍该软件的不同功能。标题说明了该功能，副标题解释了为什么在评估不同软件时此功能很重要。...动画图像和大胆的色彩与Orangina品牌的大胆，有趣的个性完美契合。此外，你可能会注意到某些区域是实际产品，而其他只是有关其产品的提示和详细信息。...但该品牌已设法创建了一个不仅内容相关的，而且还能帮助用户快速，轻松地找到正在寻找的东西的产品页面。这部分归功于Minwax Product Finder模块。...在产品的女模特照片库下方，为顾客提供了实例展示，揭示了女式衬衫的生产步骤，材料和对比其他产品独一无二的高级品质。...产品描述 Metavrse通过完整的PDF详细介绍其VR Photobooth™，网站访问者可以在产品页面底部免费下载。

1.3K2 0

17个最佳WordPress画廊插件

凭借精美的动画过滤和自定义标题，它非常适合投资组合项目，图像画廊，团队成员的简历，博客文章和其他有序网格内容。...具有自动回退功能，可确保您的活动簿在所有平台上正确显示，此插件具有所需的所有基本功能和高级功能：交互式页面，灯箱，单页或双页视图，以及更多其他内容都包含在此软件包中。...垂直流将您的图像分布在等宽的列中，而不会对其进行裁剪；水平流在同一图库中很好地显示纵向和横向图像，而经典网格是正方形图像和徽标的可靠选择。...这个WordPress画廊插件可以从各种各样的来源中提取图像，包括Instagram，Facebook，WooCommerce产品和RSS feed。...这个图库插件可用于显示您的内容，从而为投资组合，WooCommerce产品，照片，博客文章或其他任何寻求现代有效处理的内容创建吸引人的显示。

11.4K3 1

解锁高质量技术文档撰写密码，码农必看！

3.2 增强可读性技巧分层次组织内容，利用清晰的层级结构，如一级标题、二级标题、三级标题等，能帮助读者快速把握文档结构和内容层次。...例如，在一份关于数据库操作的技术文档中，所有的代码示例都采用相同的字体、缩进和颜色显示，读者在查看代码时就能更专注于代码本身，而不会被混乱的格式干扰。...它们支持多人同时在线编辑，并且能够实时显示其他成员的编辑内容，避免了版本冲突和沟通不畅的问题。...它包括算法、数据结构、类和函数的定义、接口的详细描述等内容，为开发人员编写代码提供了具体的指导。...开发人员可以根据这个详细设计来实现购物车功能的代码，确保每个细节都符合预期。 7.3 接口文档（一）概念接口文档是对系统中各个模块之间以及系统与其他外部系统之间接口的详细描述。

4091 0

魔改笔记六：twikoo及导航栏美化

在修改过程中，我也参考了一些小伙伴的内容，你可以在下方的引用链接中查看。...首先，你可以看到我的导航栏下滑时会显示标题，因此我们需要将这部分内容添加进来。...{ position: relative; padding: 10px 30px /*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/ } /*显示标题...我希望描述文字、文件名称和表情包类别名称都能整整齐齐，这样既方便我自己，也方便读者。因此，我稍微整理了一下，将所有表情包都放到了github仓库中，并分享出来，希望能对大家有所帮助。...描述文字是指选中表情包后在评论区显示的文字。为了方便起见，我将所有的描述文字都改成了“表情包名称 + 表情包内容”的格式。

6731 0

Lighthouse: WooCommerce！

、流量包等内容，不需要了解每项的含义和计费规则；WooCommerce 应用镜像模板则预置了 WordPress、Nginx、MariaDB、PHP 等建站必备的软件，无需手动安装……也就是说，卖家到手的服务器...图片但都设置为英文，在后台的操作将举步维艰，要解决这个问题，就要了解如何只修改后台的语言，而不影响访客看到的部分。...图片这个时候可能会发现， WooCommerce 这几个导航依然是英文，这要怎么办？图片WooCommerce 插件语言找到【仪表盘-更新】，拉到最下方可以看到【更新翻译】的按钮，点它就是了。...以使用模板添加为例：选择产品模板类型，包括实物产品、数字产品以及变体产品（变体产品支持设置多样的产品属性，例如颜色、尺寸、材质等）；编辑产品信息（以实物产品为例）包括产品名称、产品描述、产品类型、产品价格...usr/local/lighthouse/softwares/nginx/conf/nginx.conf此时你会进入到一个编辑页面中，不过别急，这里还需要你点击一下键盘上的 “ i ” 来开启编辑功能，将下方的内容修改完成后

13.6K18 13

小程序+管理后台？一套微搭模板就够了！

对于各行业的用户来说，如需搭建一个垂直领域的知识库，腾讯云微搭产品知识库模版，即可快速拖拉拽开发出一个高可用的产品知识库应用。...知识库列表知识库列表会按照列表形式展示知识标题及内容描述，知识库列表同时支持知识内容描述的模糊查询。知识库详情知识库详情页面会显示知识标题、知识内容、相关图片。...问题列表问题列表会按照“已回复”和“待回复”分类展示用户提交的问题，列表展示内容有问题标题和问题分类。问题详情知识详情页面会显示问题标题、问题类型、问题描述、问题截图、是否回复等信息。...新增问题用户可以通过新增问题功能添加问题等待回复，新增问题字段包括了问题类别、问题标题、问题描述、问题截图等。...问题查询问题列表支持通过是否回复、问题标题、问题描述的条件查询功能。问题新建内部员工也可以在产品知识库平台上新建问题，新建问题页面字段包括问题类别、问题标题、问题描述、问题截图等。

1.9K3 0

【Playwright+Python】系列教程（五）元素定位

)).click() 说明：角色定位器包括按钮、复选框、标题、链接、列表、表格等，并遵循 ARIA 角色、ARIA 属性和可访问名称的 W3C 规范。...请注意，许多 html 元素（如）都具有隐式定义的角色，该角色可由角色定位器识别。建议优先考虑角色定位器来定位元素，因为这是最接近用户和辅助技术感知页面的方式。...5、通过替代文本定位通过其文本替代来定位元素（通常是图像），所有图片都应具有描述图像的 alt 属性。可以使用page.get_by_alt_text() 根据替代文本查找图片。...（如 img 和 area 元素）时，建议使用此定位器 6、按标题定位按元素的 title 属性查找元素语法：page.get_by_title()Dom结构示例：示例代码： expect(page.get_by_title...const shadowRoot = this.attachShadow({ mode: 'open' }); // Shadow DOM 内部样式和内容

4.2K1 3

WordPress主题制作（八）：制作文章单页模板single.php

有了前面制作index.php的经验，接下来制作single.php将会非常轻松添加标题进行分页时，下方显示页码 ?> 添加评论区注意：目前我们还没有创建comments.php，所以文章页暂时不去显示评论内容到这里我们已经基本完成了，但我们还没有调取文章，所以文章页现在仍然没有内容。在文章标题前加上一句好了，现在我们可以看到文章内容了，single.php此时也就完成啦。...WordPress主题： 9 / 14 WordPress主题制作：开始前的准备 WordPress主题制作（一）：主题文件结构 WordPress主题制作（二）：模板和模板文件 WordPress主题制作

1.5K2 0

详细讲解All in One SEO Pack设置教程(多合一SEO集)

SEO选项显示设置安装好All in One SEO Pack后，它会在文章编辑列表中添加SEO选项，包括标题、关键词和描述的快捷更改，不过这样做将会占用很大的空间，而且没有太大的作用，建议关闭站长验证...：当选中此项时，插件会自动摘录文章的部分内容作为描述，当然你可以替换它们，懒人必备去除分页页面的描述：如果有分页的话，仅在第一页添加描述，防止重复内容从不缩短长描述：默认当描述超过一定字数后，会自动进行裁切...、描述和关键词 Noindex这个页面：禁止搜索引擎索引该文章对这个页面Nofollow：对这个页面所有的链接设置为不追踪从网站地图排除：不勾选禁用本文章：在该文章中禁用seo功能这里主要填写标题...、描述和关键词，其他的选项一般情况默认不填写即可 All in One SEO Pack 是一款非常好的插件，它集成了许多我们平常需要大部分的SEO功能，可设置的项非常多，不管你是新手还是老手，都建议使用...WooCommerce 搜索引擎优化高级电子商务 SEO 支持 WooCommerce 以优化产品页面、产品类别等。

3K1 0

点击加载更多

woocommerce shortcode短代码调用

woocommerce shop开发中高频使用的10个短代码

WordPress外贸产品（B2B）网站优化方法7个实用建议!

25. 精细化列表项设计：多层嵌套布局与视觉层次构建

这个插件可以将你的WordPress文章、页面和产品导出为Hugo兼容的Markdown文件

WordPress SEO：配置Yoast和添加内容目录

WPJAM Basic 5.9 详细更新说明

14个好用的WordPress外贸商业主题适合多领域提供网站部署解决方案

把二级域名映射到wordpress网站相同别名的page页面

为woocommerce开发支付网关插件，对接支付通道

Lighthouse的跨境电商独立站秘籍！

18个最佳的产品页面设计（下）

17个最佳WordPress画廊插件

解锁高质量技术文档撰写密码，码农必看！

魔改笔记六：twikoo及导航栏美化

Lighthouse: WooCommerce！

小程序+管理后台？一套微搭模板就够了！

【Playwright+Python】系列教程（五）元素定位

WordPress主题制作（八）：制作文章单页模板single.php

详细讲解All in One SEO Pack设置教程(多合一SEO集)

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐