如何在wordpress的产品页面底下增加一个复制按钮
时间: 2023-03-19 16:25:11 浏览: 128
要在WordPress产品页面底部添加复制按钮,可以遵循以下步骤:
1. 打开functions.php文件并添加以下代码:
```
function add_copy_button() {
echo '<button class="copy-btn" onclick="copyToClipboard()">Copy</button>';
}
add_action('woocommerce_single_product_summary', 'add_copy_button', 25);
```
这将在产品页面的摘要部分底部添加一个名为“copy-btn”的按钮。
2. 在你的主题的CSS文件中添加以下CSS样式,使按钮外观更漂亮:
```
.copy-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
```
3. 添加以下JavaScript代码以实现将产品页面的URL复制到剪贴板:
```
function copyToClipboard() {
var copyText = document.createElement("input");
copyText.value = window.location.href;
document.body.appendChild(copyText);
copyText.select();
document.execCommand("copy");
document.body.removeChild(copyText);
alert("Copied to clipboard!");
}
```
这将创建一个输入元素,将URL复制到它里面,选中它,将其复制到剪贴板,然后从DOM中删除该元素。
4. 最后,保存文件并在产品页面上查看复制按钮。当用户单击按钮时,它将自动复制产品页面的URL到剪贴板。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)